CSS字体和文本

字体

是什么

字体是“文字的不同体式”或者“字的形体结构”。对于英文而言，每种字体都是由一组具有独特样式的字母、数字和符号组成的。根据外观，字体可以分为不同的类别（font collection），包括衬线字体（serif）、无衬线字体（sans-serif）和等宽字体（monospace）。每一类字体可以分成不同的字体族（font family），比如 Times 和 Helvetica。而字体族中又可以包含不同的字型（font face），反映了相应字体族基本设计的不同变化，例如 Times Roman、 Times Bold、 Helvetica Condensed 和 Bodoni italic。CSS字体属性主要描述一类字体的大小和外观，比如：使用什么字体族（是 Times，还是 Helvitica），多大字号，粗体还是斜体。

• font-maily：字体簇
• font-size：字体大小
• font-weight：字体粗细
• font-style：字体样式
• font-variant：字体变化
• font：字体简写

字体簇

font-family 用于设定元素中的文本使用什么字体，具体用法参考font-family，其常见应用和问题如下：

• 字体来源
  
  • 用户机器中安装的字体；
  • 保存在第三方网站上的字体，如：Typeket和Google Fonts
  • 保存在自身Web服务器上的字体，这些字体通过@font-face引入；
• 继承性
  font-family是可以继承的属性，因此它的值会遗传给所有后代元素。在实际应用font-family的时候，应该给整个页面设定一种主字体，然后只对那些需要使用不同字体的元素再应用 font-family。要为整个页面指定字体，可以设定 body 元素的 font-family 属性。
• 字体栈
  每种操作系统自带的字体不多，而且用户随时会安装和删除字体，因此不敢保证一定能应用某种字体来显示网页。为此，在指定文本的字体时，需要多列出几种后备字体，以防第一种字体无效。这个列表也叫字体栈，例如：body {font-family:"trebuchet ms", tahoma, sans-serif;}。注意，字体栈的最后一项要指定一个通用的字体类，如：sans-serif。通用的字体类有：
  
  • serif：衬线字体，字符笔画的末端会有一些装饰线；
  • sans-serif：无衬线字体，字符笔画的末端没有装饰线；
  • monospace：等宽字体，每个字符的宽度相等（也称代码体）；
  • cursive：草书体或手写体；
  • fantasy：不能归入其他类别的字体（一般都是奇形怪状的字体）。
• 字体搭配
  
  • 常见搭配
    
    • verdana, tahoma, sans-serif
    • helvetica, arial, sans-serif
  • 参考文献
    
    • better-css-font-stacks
• 通用字体
  
  • PC+Mac
    
    • serif：Georgia，Palatino/Book Antiqua，Times New Roman
    • Sans-Serif：Arial，Arial Black，Arial Black，Tahoma，Trebuchet MS，Verdana
    • Monospace：Courier New，Lucida Console/Monaco
    • Cursive：Comic Sans MS
    • Fantasy：Impact
  • linux
  • android
  • ios
• 默认字体
  
  • chrome：Arial，Sans-Serif
  • IE：。。。
  • firefox：。。。
• 如果字体名像 Trebuchet MS 一样多于一个单词（有空格），应该加上引号
• font-family 的值（字体名）不区分大小写

字体大小

浏览器样式表默认为每个 HTML 元素都设定了 font-size，因此你在设定 font-size 的时候，其实是在修改默认值。由于字体大小在标记层次中是可以继承的，假如你对使用的字体大小单位怎么影响继承不十分了解，那很容易碰到有些字体莫名其妙变大或变小的问题。字体的具体用法可以参考font-size，常见应用和问题如下：

• 字体大小的默认值：16px
• 绝对单位 VS 相对单位
  
  • 绝对单位：
    
    • 简介：使用像素、派卡（pica）或英寸设定字体大小，另外
    • 优点：实际字体设定多大就多大，与祖先元素的字体大小无关。
    • 缺点：在需要调整页面所有元素的字体大小时，必须一个一个地修改样式表中的 font-size，相当麻烦。
    • 其他：设定绝对字体大小时，也可以使用关键字值，比如：x-small、medium、x-large等。具体可参考Using_Keywords
  • 相对单位
    
    • 简介：使用百分比、 em 或 rem（根元素的字体大小）设定字体大小。
    • 优点：使用相对大小后，通过调整 body 元素的字体大小，可以成比例地改变所有元素的字体大小。或者，至少能通过改变某个祖先元素，只影响它的所有子元素。在反复修改布局设计的时候，这样显然能节省时间
    • 缺点：可能会出现意外的“连锁反应”
    • 其他：设定相对字体大小时，也可以使用关键字值，比如：smaller、larger。
• 使用rem
  
  • 简介：rem(root em)是CSS3新增的字体大小单位，也是相对单位，但rem是相对于HTML根元素的单位。
  • 优点：既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
  • 缺点：存在浏览器兼容性问题，除了 IE8 及更早版本外，所有浏览器均已支持rem。
  • 实际应用：对于不支持它的浏览器，需要多写一个绝对单位的声明，例如：p {font-size:14px; font-size:.875rem;}
• 浏览器缩放与字体大小调整对字体大小的影响
  
  • 浏览器缩放：整体调整
  • 字体大小调整：相对单位调整，绝对单位不变

字体样式

字体样式默认是正体，也可以是斜体，具体用法参考font-style。在实际应用中，英文中的斜体主要表示强调，如果是为了表示强调设置font-style，那么在在 HTML 标记中直接使用<em>标签即可。

字体粗细

字体粗体的主要作用是表示重要，具体用法参考font-weight。
在实际应用中，由于浏览器对font-weight的数字值实现各不相同，所以从常规字体到粗体的切换可能发生在不同的数值上——通常是 400。所以，对于font-weight属性来说，最好只用 bold 和 normal 这两个值。
此外，HTML 元素 strong 也表示重要，而它的默样式就是粗体，如果要突出文本中的某一个字或次，请使用strong。

字体变化

font-variant属性除了normal，就只有一个值，即 small-caps——导致所有
小写英文字母变成小型大写字母，具体用法请参考font-variant

属性简写

font 属性是一个简写形式，通过它只要一条 CSS 声明就可以设定所有字体属性，例如：p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}。具体规则如下：

• 必须声明 font-size 和 font-family 的值
• 所有值必须按如下顺序声明：
  
  1. font-weight、 font-style、 font-variant 不分先后；
  2. 然后是 font-size；
  3. 然后是 font-size；

font属性除了用于字体属性的简写外，还可以给它指定一些特殊的值，如下所示：

• caption：使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）
• icon：使用图标标签的字体（CSS2）
• menu：使用菜单的字体（CSS2）
• message-box：使用信息对话框的文本字体（CSS2）
• small-caption：使用小控件的字体（CSS2）
• status-bar：使用窗口状态栏的字体（CSS2）

参考文献：

• font

其他属性

• font-stretch
• font-size-adjust

Web字体

Web字体指的是非用户机器中的字体。目前，可以通过使用@font-face规则在网页中嵌入Web字体，并且该功能已经得到了浏览器广泛支持。设定Web字体的方式如下所示：

• 使用Google Web Fonts或Adobe的Typekit等公共字体
  以Google Web Fonts为例，访问https://www.google.com/fonts，找到想要的字体，单击“Add To Collection”，然后单击页面底部的 Use 按钮。Google 就会生成一个指向刚刚选定字体的<link>标签，直接把它复制粘贴到你的 HTML 文件中即可。例如：<link href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto' rel='stylesheet' type='text/css'>，在CSS中引用下载的字体：font-family: 'Open Sans', Roboto, sans-serif;

• 使用@font-face规则
  使用@font-face规则的前提是可以从网站或第三方Web服务器下载到相应的字体包，以这种方式提供的字体，会在使用该字体的页面第一次加载时被浏览器下载并缓存起来，以后就不用下载了。使用@font-face的一个问题是不同的浏览器要求的字体格式不同，具体如下所示：

  • Firefox/Safari/Chrome/IOS Safari4.1以上版本：OTF——OpeType，TTF——TrueType；
  • IE：EOT——Embedded Open Type；
  • IOS Safari4.1之前版本：SVG——Scalable Vector Graphics；

Font Squirrel提供了很多现成的字体包，每个字体包中都包含所有必要格式的字体和为每款浏览器提供正确格式的 CSS 代码。另外，Font Squirrel还有一个转换程序，能够把你上传的字体转换成字体包。下面就是 Font Squirrel 为 Ubuntu Titling Bold 字体生成的@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;}

Web字体的其他问题：

• Web字体可能导致机器中出现同名字体，以至混淆。为此，Web专家Paul Irish写过一个跨跨浏览器@font-face 的“笑脸版”，详细内容请参考bulletproof-font-face-implementation-syntax；
• 需要深入入了解@font-face规则的话，可以参考How to use @font-face；
• 除非浏览器统一支持一种字体格式，否则必须面对多种字体格式并存问题。如何使用@font-face规则处理多种字体格式，以及保证Internet Explorer取得必要的.eot格式的字体，可以参考fixing-ie9-font-face-problems。

---

文本

是什么

文本就是一组字或字符，比如章标题、段落正文等等，跟使用什么字体无关。
CSS文本属性描述对文本的处理方式，比如：行高或者字符间距多大，有没有下划线和缩进。常用的CSS文本属性如下所示：

• text-indent
• letter-spacing
• word-spacing
• text-decoration
• text-align
• line-height
• text-transform
• vertical-align

文本缩进

text-indent属性设定行内盒子相对于包含元素的起点，具体用法参考text-indent，常见问题和注意点如下：

• 行内盒子

  CSS 会把元素中的文本放在一个不可见的盒子里，比如对 p 元素中的一段文本，CSS 将其视为很长的一行，只不过在遇到容器边界时会折行。例如：

  p {border:3px solid red;}span {border:1px solid green;}

  

  <p><span>Here is a long paragraph…</span></p>

  总结：实际上缩进的是这个文本盒子的起点位置，后续的行是不会缩进的。如果需要缩进整个段落，可以使用margin或padding。

• text-indent适用于块容器，包含inline-block；

• text-indent是可继承的，且子元素获得的继承值并不是祖先元素设定的值，而是计算的值。示例代码如下：

  .root {    border: 1px solid black;        text-indent: 30px;}.root > div > span {    display: inline-block;}

  <div class="root">    <span>行内儿子节点</span>    <div>        <span>行内块级孙子节点</span>    </div></div>

  
  总结：这里没有使用百分比，所以子元素的继承值都是30px。但需要注意示例中的前后两个span，后一个span的缩进较前一个span较大，这是由于后一个span是行内块元素，继承的缩进值起作用了。

• text-indent允许设定负值，注意配合padding或margin；

字符间距

letter-spacing为正值时增大字符间距，为负值时缩小间距。无论设定字体大小时使用的是什么单位，设定字符间距一定要用相对单位，以便字间距能随字体大小同比例变化。具体用法请参考[letter-spacing]。(http://css.doyoe.com/properties/text/letter-spacing.htm)

单词间距

CSS把任何两边有空白的字符和字符串都视作“单词”，纯汉字文本一段之中没有空格，因此单词间距对中文网页几乎没有用，但对中英混排段落可能有用。单词间距属性具体用法请参考word-spacing。

文本装饰

文本装饰有下划线、上划线、贯串线和闪烁等样式，具体用法可参考text-decoration

文本对齐

一般文本对齐方式有：左对齐/left、右对齐/right、居中对齐/center，以及两端对齐/justify，其中两端对齐是CSS3新增的属性。除此之外，CSS3还定义了一些额外的属性，但浏览器都不怎么支持，具体内容请参考text-align。
在实际应用中，如果对元素设置了文本对齐属性，而对子元素是如何显示存在疑惑时，只要根据一下规则去计算即可：

• 文本对齐属性只适用于块容器（包含行内块元素）；
• 文本对齐属性是可继承的
  
  • 如果没有子元素，则文本内容直接根据父元素定义的对齐属性在父元素盒子里显示；
  • 如果子元素是行内非块元素，将其当做文本内容处理（虽然该子元素会继承对齐属性，但是该属性不适用于行内非块元素）；
  • 如果子元素是行内块元素，则该元素会按照父元素的文本对齐属性在父元素盒子里显示。此外，该元素会继承父元素的对齐属性，按照以上规则处理其子元素
  • 如果子元素非行内块元素，则该元素会继承父元素的对齐属性，然后继续按照以上规则处理子元素；

行高

CSS 中的行高平均分布在一行文本的上方和下方，具体用法参考line-height。常见问题和注意点如下：

• 适用于所有元素，且可继承；
• 行高小于字体大小时，行与行之间会出现重叠；
• 实际应用时，要使用相对单位（百分比或乘积因子），避免使用绝对单位（如像素）——字体增大时，可能会出现行与行的重叠；
• font快捷属性：以复合值的形式把 font-size 和 line-height 值写在一块，例如div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}；
• 文本行高为normal不代表就是1倍于字体大小

文本转换

文本转换属性用于转换元素中文本的大小写，它可以设定英文文本首字母大写、全部字母大写和全部字母小写。具体用法可参考text-transform。

垂直对齐

垂直对齐属性vertical-align以基线为参照上下移动文本， 具体用法参考vertical-align。常见问题和注意点：

• 垂直对齐属性只适用于行内元素；
• HTML标签<sup>和<sub>有默认的上标和下标样式，但效果不是很好；
• 应用场景：公式或化学分子式中的上标和下标，文本中脚注的角标；

其他属性

• white-space
• tab-size
• word-break
• word-wrap
• overflow-wrap
• text-align-last
• text-justify
• text-size-adjust

---

最佳实战

虽然学习了字体和文本属性，但不一定能够在实际应用中搭配好字体和文本样式。文字排版讲求匀称，一般是由看不见的网格，框定页面文字的走向和布局，匀称的版式可以增强页面的可读性。

在线资源：
- http://ilovetypography.com/
- http://www.thinkingwithtype.com/
- http://webtypography.net/