CSS学习笔记(二) 字体和文本

理解字体和文本属性,对于创造出专业水准的网页排版非常重要。一个网站的品质如何,有时候只要看看它用的字体就能一目了然。

1.网页中字体的来源

  • 用户机器中安装的字体
  • 保存在第三方网站上的字体(可以用link标签把它们链接到你的页面上)
  • 保存在你的Web服务器上的字体(可以使用@font-face规则随网页一起发送给浏览器)

2.字体和文本的区别

2.1 字体

字体是 文字的不同体式字的形体结构

根据外观,字体可分为不同的类别(font-collection),包括衬线字体(serif)、无衬线字体(sans-serif)和等宽字体(monospace)。每一类字体可以分为不同的字体族(font family),比如 Times 和 Helvetica。而字体族中又可以包含不同的字形(font face),反映了相应字体族基本设计的不同变化。例如 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 {font-size:18px;}

提示:总的来说,用于设定字体大小的单位有两种,一种是绝对单位,比如像素或点,另一种是相对单位,比如百分比或em。(还有一种CSS3新增的rem单位

3.3 字体样式 font-style

值:italic、oblique、normal
示例:h2 {font-style:italic;}
说明:

  1. italic和oblique都表示斜体;
  2. 英文中的斜体主要表示强调。假如你真想表示强调,那在 HTML 标记中直接使用<em>
    标签即可,因为它默认就是斜体。
  3. font-style 有一个 normal 值,中文就是常规的意思。 这个值其实不仅 font-style 有,很多其他属性也有,它的作用就是取消所有的特殊样式。这个值是用来有选择地覆盖某个默认或你设定的全局属性的。

3.4 字体粗细 font-weight

可能的值:100、 200……900,或者 lighter、 normal、 bold 和 bolder。
示例: a {font-weight:bold;}
说明:粗体的主要作用是表示重要。实际上, HTML 元素 strong 也表示重要,而它的默认
样式就是粗体。

3.5 字体变化 font-variant

值: small-caps(将所有小写字母变成小型大写字母)、 normal
示例: blockquote {font-variant:small-caps;}
说明:慎用,大写字母不像小写字母那样有上伸部分和下伸部分作为视觉提示,所以全都使用大写字母会增加辨识难度。

3.6 简写字体属性 font

示例:

p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}
<p>Here's a piece of text loaded up with every possible font property.</p>

说明:使用这个简写形式要遵守两条规则,否则浏览器无法正确解释声明的值。

  • 规则一:必须声明 font-size 和 font-family 的值
  • 规则二:所有值必须按如下顺序声明:
    1. font-weight、 font-style、 font-variant 不分先后;
    2. 然后是 font-size;
    3. 最后是 font-family。

提示:实际上,在设定 font-size 属性的同时,可以顺便设定 line-height(行高)值。也就是说,字体大小和行高的值可以写在一块,比如 12px/1.5。当然, line-height 是
文本属性,下一节我们会讲到它。

4.文本属性

4.1 文本缩进 text-indent

值:长度值(正、负均可)
示例:p {text-indent:3em;}

4.2 字符间距 letter-spacing

值:任何长度值(正、负值均可)。
示例:p {letter-spacing:.2em;}

4.3 单词间距 word-spacing

值:任何长度值(正、负值均可)。
示例:p {word-spacing:.2em;}

4.4 文本装饰 text-decoration

值:underline、overline、line-through、blink、none。
示例:.retailprice {text-decoration:line-through;}

4.5 文本对齐 text-align

值:left、right、center、justify
示例:p {text-align:right;}

4.6 行高 line-height

值:任何数字值(不用指定单位)
示例:p {line-height:1.5;}
说明:

  1. CSS中的行高平均分布在一行文本的上方和下方。比如,如果字体大小是12像素,行高是20像素,则浏览器会在文本上方和下方各加4像素的空白,以凑足20像素的行高。
  2. 修改默认行高最简单的方式就是使用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

值:none、uppercase、lowercase、capitalize。
示例:p {text-transform:capitalize;}
说明:capitalize 值会将每个词的首字母装换为大写,这种效果在很多广告、报道、杂志的标题中很常见。

4.8 垂直对齐 vertical-align

值:任意长度值以及 sub、 super、 top、 middle、 bottom 等。
示例:span {vertical-align:60%;}
说明:

  1. vertical-align 以基线为参照上下移动文本,但这个属性只影响行内元素。
  2. 如果想在垂直方向上对齐块级元素,必须把其display属性设定为inline。
  3. 该属性较为常用于公式或化学分子式中的上下标,或用于文本中脚注的角标。
  4. HTML 标签<sup><sub>有默认的上标和下标样式,但重新设定一下vertical-align 和 font-size 属性能得到更美观的效果。例如:p.custom {font-size:.8em; vertical-align:1em;}

5. Web 字体

目前,使用 @font-face 规则在网页中嵌入可下载字体的CSS功能,已经得到了浏览器广泛支持。该规则为设计师提供了系统自带的字体以外的广泛选择。换句话说,浏览器可以从Web服务器下载字体,就意味着不必再依赖用户机器中的字体,而且也可以确保用户能够看到CSS中设定的字体。

5.1 设定Web字体的方式

有以下三种:

  • 使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字体库
  • 使用事先打好包的@font-face 包
  • 使用 Font Squirrel 用你自己的字体生成@font-face 包。

5.2 公共字体库

5.3 打包的 @font-face

5.4 生成的 @font-face

5.5 文字版式

文字版式讲求匀称,一般是由看不见的网格,框定页面文字的走向和布局。匀称的版式可以增强页面的可读性。

参考资料

    原文作者:omgdog
    原文地址: https://segmentfault.com/a/1190000002424847
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞