摘要： 了解字体和文本属性对于创建具有专业外观的网页排版极其重要。 为字体和文本定义了单独的属性。 字体属性主要描述一类字体的大小和外观。 还有一个新的单位字体样式值示例描述，并且都以英文形式表示为粗体，其中粗体主要表示。 font-weight 的可能值html字体库，或 和 。
理解字体和文本属性，对于创造出专业水准的网页排版非常重要。一个网站的品质如何，有时候只要看看它用的字体就能一目了然。
1.网页字体的来源
用户机器上安装的字体
存储在第三方网站上的字体（您可以使用链接标签将它们链接到您的页面）
存储在网络服务器上的字体（可以使用@font-face规则将网页发送到浏览器）
2. 字体与文字的区别 2.1 字体
字体是不同风格的字符或字符的物理结构。
根据形状，字体可以分为不同的类别（font-collection），包括衬线字体（serif）、无衬线字体（sans-serif）和等宽字体（monospace）。 每种字体又可以分为不同的字体家族（font family），例如Times和Helvetica。 一个字体家族可以包含不同的字体，反映了相应字体家族基本设计的不同变化。 示例包括 Times Roman、Times Bold、Helvetica Condensed 和 Bodoni italic。
2.2 正文
文本只是一组单词或字符，例如文章标题、段落正文等，无论使用哪种字体。
CSS 为字体和文本分别定义了属性。字体属性主要描述了一类字体的大小和外观。比如，用了什么字体族，多大字号，粗体还是斜体。文本属性描述了对文本的处理方式。比如，行高或者字符间距多大，有没有下划线和缩进。
3. 字体属性 3.1 字体家族 font-family
示例： h2 {font-family:times, serif;}
注意：如果一个字体名多于一个单词（有空格），应该加上引号。
例如：body {font-family:"trebuchet ms", tahoma, sans-serif;}
3.2 字体大小font-size
示例：h2 {字体大小：18px;}
提示：总的来说，用于设定字体大小的单位有两种，一种是绝对单位，比如像素或点，另一种是相对单位，比如百分比或em。（还有一种CSS3新增的rem单位）
3.3 字体样式font-style
值：斜体、斜体、正常
示例：h2 {字体样式：斜体；}
阐明：
斜体和斜体都表示粗体；
英文中的粗体主要是指出的意思。如果确实要指出的话，直接在HTML标记中使用
标签很好，因为它默认为斜体。
font-style有一个normal值，中文意思是正常。 虽然这个值除了font-style之外还存在html字体库，但是很多其他的属性也存在，它的作用就是取消所有特殊的样式。 该值用于有选择地覆盖您设置的默认或全局属性。
3.4 字体粗细font-weight
可能的值：100、200...900 或更亮、正常、粗体和更粗体。
示例：{font-weight:bold;}
注：粗体的主要作用是表示重要性。事实上，HTML元素strong也表示重要性，其默认值
样式为 Times New Roman。
3.5 字体变体 font-variant
值：小型大写字母（使所有小写字母变为大写字母）、正常
示例： blockquote {font-variant:small-caps;}
注意：谨慎使用，大写字母不像大写字母那样有上升部和下降部作为视觉提示，因此全部使用大写字母会降低识别难度。
3.6 速记字体属性字体
例子：
p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}
Here"s a piece of text loaded up with every possible font property.
注意：使用该缩写时要遵循两个规则，否则浏览器将无法正确解释声明的值。
规则1：必须声明font-size和font-family的值
规则2：所有值必须按以下顺序声明：
字体粗细、字体样式、字体变体（无特定顺序）；
然后是字体大小；
最后一个是字体系列。
提示：实际上，在设定 font-size 属性的同时，可以顺便设定 line-height（行高）值。也就是说，字体大小和行高的值可以写在一块，比如 12px/1.5。当然， line-height 是
文本属性，下一节我们会讲到它。
4. 文本属性 4.1 文本缩进 text-indent
Value：长度值（正或负）
示例：p {text-indent:3em;}
4.2 字符宽度字母间距
值：任何宽度值（正或负）。
示例：p {字母间距：.2em;}
4.3 字宽word-spacing
值：任何宽度值（正或负）。
示例：p {字间距：.2em;}
4.4 文本装饰 text-decoration
值：下划线、上划线、穿线、闪烁、无。
示例：.retailprice {text-decoration:line-through;}
4.5 文本对齐 text-align
值：左、右、居中、对齐
示例：p {text-align:right;}
4.6 行高 line-height
值：任何数值（不指定单位）
示例：p {行高：1.5;}
阐明：
CSS 中的列宽均匀分布在文本行的上方和下方。 例如，如果字体大小为 12 像素，行高为 20 像素，则浏览器将在文本上方和下方添加 4 像素的空间，以允许 20 像素的列宽。
修改默认列宽最简单的方法是使用font快捷属性，将font-size和font-height的值以复合值的形式写在一起，例如：div#intro {font: 1.2em/ 1.4 helvetica, arial, sans -serif;} 上一行代码中，行高是12em字体大小的1.4倍。 请注意，无需为 line-heightz 值指定单位，只需指定一个值即可。
4.7 文本转换 text-transform
值：无、大写、小写、大写。
示例：p {文本转换：大写；}
说明：大写值会将每个单词的第一个字母转换为小写。 这种效果在许多广告、报告和杂志标题中很常见。
4.8 垂直对齐vertical-align
值：任何宽度值加上 sub、super、top、middle、bottom 等。
示例：span {vertical-align:60%;}
阐明：
Vertical-align 使用基线作为参考来上下连接文本，但该属性仅影响内联元素。
如果要垂直对齐块级元素，必须将其显示属性设置为内联。
该属性更常用于公式或化学式中的上标和下标，或者文本页脚中的下标。
HTML标签有默认的上标和下标样式，但是重新设置vertical-align和font-size属性可以获得更漂亮的效果。 例如： p.custom {font-size:.8em; 垂直对齐：1em；}
5. 网页字体
目前，使用 @font-face 规则在网页中嵌入可下载字体的CSS功能，已经得到了浏览器广泛支持。该规则为设计师提供了系统自带的字体以外的广泛选择。换句话说，浏览器可以从Web服务器下载字体，就意味着不必再依赖用户机器中的字体，而且也可以确保用户能够看到CSS中设定的字体。
5.1 设置网页字体的形式
共有三种类型：
使用公共字体库，例如 Google Web Fonts 或 Adobe 的 Typekit
使用预先打包的@font-face包
使用 Font Squirrel 生成带有您自己的字体的 @font-face 包。
5.2 公共字体库 5.3 打包@font-face包 5.4 生成@font-face包 5.5 文本布局
文字版式讲求匀称，一般是由看不见的网格，框定页面文字的走向和布局。匀称的版式可以增强页面的可读性。
参考
CSS 设计指南
发表评论