(5)CSS 给文本加样式——①字体属性

本知识学习用时:3小时,总第32/10000小时

前言:作为 Web 页面最基本的组成部分,“文本”的重要性不言而喻。对于“文本”来说,我们需要掌握两个与之相关的属性——“字体属性”和“文本属性”。

CSS 字体属性主要定义“文本”的字体系列、字体大小、字体粗细、风格和变形等;

CSS 文本属性主要定义“文本”的外观:如缩进和水平对齐、垂直对齐、字间隔和字母间隔、文本转换、文本装饰、文本阴影、处理空白符和文本方向等。

本篇,我们先学习“CSS 字体属性”。

一、定义“文本”的字体系列

font-family 属性用于定义“文本”的字体系列。

首先,我们平时所说的“字体”并不只是单个的字体,而是一个“字体系列”。

除了如 Times、Verdana、Helvetica 或 Arial 等各种“特定字体系列”外,CSS 还定义了5种“通用字体系列”。所谓“通用字体系列”是指:拥有相似外观的字体系统组合。理论上,用户安装的任何字体系列往往都会落入到这 5 种通用系列当中(实际工作中的特例除外)。

5 种通用字体系列:

Serif 字体(又名“衬线字体”)

Sans-serif 字体(又名“无衬线字体”)

Monospace 字体 (又名“等宽”字体)

Cursive 字体(又名“手写体”)

Fantasy 字体(又名“梦幻字体”)

这种字体的特征就是:我们无法很容易地将其归于以上 4 种字体中。它主要被用在图片中,字体看起来很艺术,实际网页上用得不多。

工作中,怎么指定“字体系列”?

假如需求如下:我想对 p 指定字体为 Times 显示,但同时也接受以下的 serif 字体顺序(TimesNR、Georgia、New Century Schoolbook 、New York)。

那么往往我们会进行如下代码书写:

⚠️为什么这么写:

① font-family 属性用于指定文档采用何种“字体系列”;

② 当我们只对 Web 页面指定一个或几个特定字体时,若按以下代码书写就会出问题:

由于在一个跨平台的环境下,我们无法保证用户同样也安装了这些特定字体。如果用户没有安装这几种字体,那么用户的浏览器就会使用一个默认的字体来显示这个 Web 。对此,我们 Web 制作者将无法控制显示效果。

但,如果末尾加了一个 serif ,则可以告诉用户的浏览器:即使你电脑里没有安装我以上的这些字体,那么也请使用一个你电脑里边安装了的“衬线体”来显示我的 p 。

③ 注意看规则里边出现了“单引号”:

当一个字体名中有一个或多个空格,或者如果字体名包括 # 或 $ 之类的符号时,我们就必须用单引号把这个字体名引起来,以便浏览器识别。

另外一种情况是,如果你把上文的 5 种“通用字体系列”用单引号引起来,那么浏览器则会认为(或者你本来就想告诉浏览器):你需要一个与这 5 种字体系列同名的“特定字体”而不是“通用字体”。

二、定义“文本”的字体大小

font-size 属性用于定义“文本”的字体大小。

请先阅读:

《Oli的前端一万小时》之:(4)CSS 值和单位

中关于 em 、rem 等的讲解。

在实际工作运用中:

在不考虑 IE8 及以下版本的前提下,我们完全可以一开始就将文档的 font-size 值设置为 10px,这样在之后的计算中就很简单了。所需要的 (r)em 值就是想得到的像素值除以 10,而不是浏览器默认大小的 16。这样我们就可以很轻松地调整 HTML 中我们想调整的不同类型文本的字体大小了。

三、定义“文本”的字体粗细

font-weight 属性用于定义“文本”的字体粗细。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。

但,字体所拥有的字重的数量,实际上很少存在满足有 9 个字重刚好跟 100-900 的 CSS 字重一一对应的情况,通常字体拥有的字重数量为 4 到 6 个。当然,也不必担心,至少 400 和 700 对应的字重是每种字体必备的——数字 400 等价于 normal,而 700 等价于 bold。

实际工作中,我们一般最常用的还是 normal 和 bold 这两个值。用法举例:

如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与之相反,关键词 lighter 则会导致浏览器将加粗度下移而不是上移。

四、定义“文本”的字体风格

font-style 属性用于定义“文本”的字体风格。

有以下几个值:

① italic: 如果当前字体的斜体版本可用,那么文本设置为斜体版本;如果不可用,那么浏览器会利用 oblique 状态来模拟 italics。eg:

② oblique: 将文本设置为斜体字体的模拟版本,也就是将普通文本倾斜的样式应用到文本中。eg:

③ normal : 将文本设置为普通字体 (将存在的斜体关闭)

五、定义“文本”的字体变形

font-variant 用于定义“文本”的字体变形。

对于 font-variant ,它只有两个非继承值:默认值 normal 和 small-caps。normal 描述正常文本,small-caps 要求使用“小型大写字母”文本。

后记:下篇文章我们将接着讨论文本属性,在学习到其中的 line-height 后,我们再接着这篇文章引入 font 属性。届时,“CSS 给文本加样式”将完全被我们掌握。加油!

欢迎继续关注下文 :

(6)CSS 给文本加样式——② 文本属性

(本文版权归 ”公号 | Oli的前端一万小时“ 所有,转载需说明来源)

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180605G215BY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券