阅读 448

(Ⅰ)CSS 的“字体属性”同样包罗万象 | CSS 给文本加样式:① 字体属性

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码

简述字体图标的原理,动手实现使用 iconfont 实现字体图标的 demo。
复制代码

🙋上方面试题“参考答案详解”,请点击此处查看获取方式!



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

  • CSS 字体属性:主要定义“文本”的字体系列、字体大小、字体粗细、风格和变形等;
  • CSS 文本属性:主要定义“文本”的外观——如缩进和水平对齐、垂直对齐、字间隔和字母间隔、文本转换、文本装饰、文本阴影、处理空白符和文本方向等。

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


1 定义“文本”的字体系列

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

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

除了如 Times、Verdana、Helvetica 或 Arial 等各种“特定字体系列”外,CSS 还定义了 5 种“通用字体系列”。

所谓“通用字体系列”是指:拥有相似外观的字体系统组合。理论上,用户安装的任何字体系列往往都会落入到这 5 种通用系列当中(实际工作中的特例除外)。

1.1 5 种通用字体系列

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

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

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

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

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

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

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

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

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

p {
  font-family: Times, TimesNR, Georgia, 'New Century Schoolbook''New York', serif;
}

/*
🏆当然,也可以用 Unicode 码来直接表示字体。例如:
'\5FAE\8F6F\96C5\9ED1' 就是“微软雅黑”这四个字的 Unicode 码。
我们怎么知道一个“字体”的 Unicode 码?我们可以右键检查元素,然后点击 console,
然后输入 escape('黑体'),就可以弹出相应的码。然后把 %u 换成 \。
 */
复制代码

❗️为什么这么写:

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

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

p {
  font-family: Times, TimesNR, Georgia, 'New Century Schoolbook''New York';
}
复制代码

由于在一个跨平台的环境下,我们无法保证用户同样也安装了这些特定字体。

如果用户没有安装这几种字体,那么用户的浏览器就会使用一个默认的字体来显示这个 Web。对此,我们 Web 制作者将无法控制显示效果。

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

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

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

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


下一篇我们继续讲解“字体属性”相关的知识点。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论