CSS中的字体和文本
一、字体
用户机器中安装的字体。
保存在第三方网站上的字体。最常见的是Typekit 和Google,可以使用link 标签把它们链接到你的页面上。
保存在你的Web 服务器上的字体。这些字体可以使用@font-face 规则随网页一起发送给浏览器。
与字体样式相关的6 个属性。
font-family
font-size
font-style
font-weight
font-variant
font(简写属性)
有哪些通用的字体类呢?有以下5 种:
serif,也就是衬线字体,在每个字符笔画的末端会有一些装饰线;
sans-serif,也就是无衬线字体,字符笔画的末端没有装饰线;
monospace,也就是等宽字体,顾名思义,就是每个字符的宽度相等(也称代码体);
cursive,也就是草书体或手写体;
fantasy,不能归入其他类别的字体(一般都是奇形怪状的字体)。
二、文本属性
以下是几个最有用的CSS 文本属性:
text-indent
letter-spacing
word-spacing
text-decoration
text-align
line-height
text-transform
vertical-align
text-indent:
letter-spacing:
word-spacing:
text-decoration:
text-align:
line-height:
text-transform:
vertical-align:
1p.custom sub {font-size:60%; vertical-align:-.4em;}
2p.custom sup {font-size:65%; vertical-align:.65em;}
3p.customsmall {font-size:.8em; vertical-align:1em;}
三、Web字体
@font-face 规则为设计师提供了系统自带字体以外的广泛选择。换句话说,浏览器可以从Web 服务器下载字体,就意味着不必再依赖用户机器中的字体,而且也可以确保用户能够看到CSS 中设定的字体。
设定Web 字体的方式有以下三种。
使用Google Web Fonts 或Adobe 的Typekit 等公共字体库。
使用事先打好包的@font-face 包。
使用Font Squirrel 用你自己的字体生成@font-face 包。
1. 公共字体库
打开http://www.google.com/webfonts,找到想要的字体,单击Add to Collection 按钮,然后单击页面底部的Use 按钮。然后,Google 就会生成一个指向你刚刚选定字体的标签,直接把它复制粘贴到你的HTML 文件中即可。
<link href=
'http://fonts.googleapis.com/css?family=Anton|Niconne|Prata'
rel=
'stylesheet'
type=
'text/css'
>
把这个链接添加到页面的标签中之后,就可以像使用其他字体一样使用这些Web 字体了。用户打开网页时,浏览器就会从Google 的服务器得到相应字体。比如
h3 {font: 20px "Prata", serif;}
2. 打包的@font-face包
@font-face {
/*这就是将来在字体栈中引用的字体族的名字*/
font-family:'UbuntuTitlingBold';
src: url('UbuntuTitling-Bold-webfont.eot');
src: url('UbuntuTitling-Bold-webfont.eot?#iefix')
format('embedded-opentype'),
url('UbuntuTitling-Bold-webfont.woff')
format('woff'),
url('UbuntuTitling-Bold-webfont.ttf')
format('truetype'),
url('UbuntuTitling-Bold-webfont.
svg#UbuntuTitlingBold') format('svg');
font-weight: normal;
font-style: normal;
}
把以上代码添加到网页中之后,就可以使用font-family 以常规方式引用该字体了。引用字体时要使用@font-face 规则中font-family 属性的值作为字体族的名字。
四、文字版式
1. 简单的文本布局
<article> <h1>CSS</h1> <p>CSS stands for Cascading Style Sheets. CSS controls the presentational aspects of your Web pages.</p> <h2>Block-Level Elements</h2> <p>Block-level elements stack down the page. They include:</p> <ul> <li><code>header</code></li> <li><code>section</code></li> <li><code>h1, h2, etc.</code></li> </ul> <h2>Inline Elements</h2> <p>Inline elements sit next to each other, if there is room. They include:</p> <ul> <li><code>img</code></li> <li><code>a</code></li> <li><code>em</code></li> </ul> <blockquote> <q>Typography maketh the Web site.</q><cite>CWS</cite> </blockquote> </article>
1/*删除所有元素的外边距*/
2* {margin:0; padding:0;}
3/*设定主字体族和字体大小*/
4body {font:1.0em helvetica, arial, sans-serif;}
5/*居中显示盒子*/
6article {width:500px; margin:20px auto; padding:20px; border:2px solid #999;}
接下来,需要巧妙地安排一下元素间的垂直距离。另外,去掉默认外边距后列表项目的符号也跑到了外面,这里一块儿修复。
/*标题周围的空白*/
h1, h2, h3, h4, h5, h6 {line-height:1.15em; margin-bottom:.1em;}
/*文本元素周围的空白*/
p, ul, blockquote {line-height:1.15em; margin-bottom:.75em;}
/*缩进列表*/
ul {margin-left:32px;}
最后,让各级标题也更均衡一些,保证较大的标题突出,最小的标题也不至于不明显,同时也增大了code 元素的字体。
/*调整标题文本*/
h1 {font-size:1.9em;}
h2 {font-size:1.6em;}
h3 {font-size:1.4em;}
5h4 {font-size:1.2em;}
h5 {font-size:1em;}
h6 {font-size:.9em;}
/*调整段落文本*/
p {font-size:.9em;}
/*调整代码文本(默认值太小了)*/
code {font-size:1.3em;}
2. 基于网格排版
使用Adobe Fireworks创建了一个100×18 像素的矩形,并在它的底部画了一条灰线。然后将其保存为.png 格式,并命名为grid_18px.png
把这张图片放到body 元素的背景上:
/*添加网格线*/
body {background-image:url(images/grid_18px.png);}
这个例子包含如下所示的简单段落:
In traditional typography, text is composed…
CSS 规则如下:
/*去掉所有元素的内边距和外边距*/
* {margin:0; padding:0;}
body {
/*添加网格背景*/
background-image:url(images/grid_18px.png);
/*设定字体*/
font:100% helvetica, arial, sans-serif;
/*加宽左右外边距,得到一栏的雏形*/
margin:0 40px 0;
}
p {
/*设定字体大小*/
font-size:13px;
/*将行高设定为等于网格高*/
line-height:18px;
}
再给容器body 元素添加4 像素的内边距,以便把元素向下推到文本基线与网格对齐的位置。只要让第一个元素与网格对齐,其他元素就都能对齐了。实际上,给body上方添加了22 像素(4+18)的内边距,以便上方能有一定的空间:通过margin-bottom在每个段落之间加上一个空行:
padding-top:22px;
之后,给段落添加一条声明:
p {
/*设定字体大小*/
font-size:13px;
/*把行高设定为等于网格高度*/
line-height:18px;
margin-bottom:18px;
}
现在增加一个h3的标签:
In traditional typography, text is composed…
Type for Every Use
The ubiquity of type has led typographers…
针对这个标题的CSS 规则如下:
h3 {font-size:18px; line-height:18px;}
标题的基线比网格低几个像素,需要做一些调整:
h3 {
font-size:18px;
line-height:18px;
margin-top:-2px;
margin-bottom:2px;
}
通过类似的技巧对齐比网格高的元素,比如h1 1
Typography
In traditional typography…
当前给它设定的CSS 如下:
h1 {font-size:24px; line-height:36px;}
h1 {
font-size:24px;
line-height:36px;
margin-top:-13px;
margin-bottom:13px;
}
在这个练习最后,我们再加几个不同字体大小的标题、一个无序列表和一个blockquote 元素。看一看把网格去掉之后页面是什么样子。
* {margin:0; padding:0;}
body {font:100% helvetica, arial, sans-serif; backgroundimage:
url(images/grid_18px.png); margin:0 20px 0; padding:21px;}
p {font-size:14px; line-height:18px; margin-bottom:18px;}
h1 {font-size:24px; line-height:36px; margin-top:-13px; margin-bottom:13px;}
h2 {font-size:18px; line-height:18px; margin-top:-2px; margin-bottom:2px;}
h3 {font-size:16px; line-height:18px; margin-top:-2px; margin-bottom:2px;}
ul {margin-bottom:18px;}
li {font-size:13px; list-style-type:none; padding:0 20px; line-height:18px;}
a {color:#777; text-decoration:none;}
blockquote {font-size:12px; line-height:18px; paddingtop: 2px; margin-bottom:16px;}
相关文章
-
CSS兄弟选择器的两种类型
1、CSS兄弟选择器,给指定选择器后面紧跟的那个选择器选中的标签设置属性。格式:选择器1+选择器2{ 属性:值; }相邻兄弟选择器必须通过+连接。相邻兄弟选择器只能选中紧跟其后的那个标签,
>2023-10-16 -
css中使用a标签的伪类选择器注意点
a标签的伪类选择器使用注意点1、a标签的伪类选择器可以单独出现也可以一起出现。2、a标签的伪类选择器如果一起出现, 那么有严格的顺序要求。默认状态:link->被访问状态:visited->鼠标悬停状
>2023-10-16 -
css盒模型布局是什么
css传统布局方式就是通过盒模型,使用display属性(文档流布局)+position属性(定位布局)+float属性(浮动布局)。css盒模型布局可以分为文档流布局、浮动布局和定位布局。文档流布局
>2023-10-16 -
css中flex布局如何使用
css flex布局说明1、flex的使用方法很简单,只需要将其display属性设置为flex就可以,也可以设置行内的flex。记得Webkit内核的浏览器,必须加上-webkit前缀。2、设为Fl
>2023-10-16 -
css中grid网格布局的介绍
1、grid布局又称为网格布局,可以实现二维布局方式。2、这是使用CSS控制的,不是使用HTML控制的,同时还可以依赖于媒体查询根据不同的上下文得新定义布局。网格线(Grid Lines)网格线组成了
>2023-10-16