CSS 引入字体

涉及知识

@font-face

@font-face 定义一个用于文本显示的自定义字体。详细内容可以参考 MDN文档 。

特点

1. 可以自定义字体名称和与名称对应的字体文件
2. 可以消除用户对电脑字体的依赖
3. 可以用于字体图标的引入

用法

@font-face {
  font-family: "myFont";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: "normal";
  font-weight: 400;
}

属性解析

字体描述	值	说明
font-family	name	必需的。定义字体的名称。
src	URL	必需的。定义该字体下载的网址或者文件路径
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义该字体应该如何被拉长。默认值是"normal"
font-style	normal italic oblique	可选。定义该字体应该是怎样样式。默认值是"normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认值是"normal"

font-family

font-family 规定元素的字体系列。
简单来说，网页在渲染时，会按顺序尝试用 font-family 中规定的字体显示文字，如果第一个字体浏览器不支持或者找不到则会尝试下一个。

用法

font-family: "Times New Roman", Georgia, Serif;

简单应用

现在我们向 css 中引入一个自定义字体，并将其应用在元素上：

@font-face {
    font-family: 'HarmonyOS_Sans';
    src: url(/fonts/HarmonyOS_Sans/HarmonyOS_Sans_Thin.ttf);
    font-weight: 100;
}

.text {
    font-family: HarmonyOS_Sans;
}

更多应用

网络/本地引入

本地引入

当使用本地引入的方式引入字体时推荐使用相对路径，但是每当需要引入该字体时都需要计算相对地址，比较繁琐。
这里我建议将引入字体的 css 语句单独写到一个 css 文件中，然后将这个 css 文件放到字体文件同目录下，然后在公共 css 文件中引入这个 css 文件。

网络引入

注意这里使用的 Web fonts 仍然受到同域限制（字体文件必须和调用它的网页同一域），但可以使用 HTTP access controls 解除这一限制。

引入其他格式字体

首先补充一个知识：

什么是format属性？如何使用format属性？

format 属性是帮助浏览器识别字体的。浏览器是不能根据字体 url 后缀去自动识别字体格式的，所以使用 format 属性来帮助浏览器识别字体格式。

字体格式如下：

• trueType格式(.ttf) – Windows和Mac上常见的字体格式，是一种原始格式，因此它并没有为网页进行优化处理。 浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
• OpenType格式(.otf) – 以TrueType为基础，也是一种原始格式，但提供更多的功能。浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
• Web Open Font格式(.woff) – 针对网页进行特殊优化，因此是Web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版，同时支持元数据包的分离。浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
• Embedded Open Type格式(.eot) – IE专用字体格式，可以从TrueType格式创建此格式字体。 浏览器支持：IE4+
• SVG格式(.svg) – 基于SVG字体渲染的格式。 浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

为解决兼容性问题，Paul Irish 写了称为 Bulletproof 的一个独特的 @font-face 语法：

@font-face { 
	font-family: 'YourWebFontName'; 
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ 
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
	url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ 
	url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ 
	url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ 
}

其中 # 后面表示引用名称，类似于别名。因为不是所有格式都被浏览器识别，所以不识别的时候加上备用引用名称。

所以当引入字体时应该参考字体文件的格式和受众浏览器做相应的 format 处理。

引入系列字体

将各种粗细的同一个字体引入 css 。
操作如下：

@font-face {
    font-family: 'HarmonyOS_Sans';
    src: url(/fonts/HarmonyOS_Sans/HarmonyOS_Sans_Thin.ttf);
    font-weight: 100;
}

@font-face {
    font-family: 'HarmonyOS_Sans';
    src: url(/fonts/HarmonyOS_Sans/HarmonyOS_Sans_Light.ttf);
    font-weight: 200;
}


@font-face {
    font-family: 'HarmonyOS_Sans';
    src: url(/fonts/HarmonyOS_Sans/HarmonyOS_Sans_Regular.ttf);
    font-weight: 400;
}

font-family 相同，font-weight 不同的 @font-face 写多个。
如此一来在应用了该字体的元素上就可以通过 font-weight 属性进行调整字体粗细了。

font-weight 值解析：

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。