涉及知识
@font-face
@font-face 定义一个用于文本显示的自定义字体。详细内容可以参考 MDN文档 。
特点
- 可以自定义字体名称和与名称对应的字体文件
- 可以消除用户对电脑字体的依赖
- 可以用于字体图标的引入
用法
@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 | 规定应该从父元素继承字体的粗细。 |