CSS 的 font-face 属性
CSS 的 font-face 是 CSS3 中允许使用自定义字体的一个模块,功能是支持 WEB 字体,能够将网络地址、自定义的 Web 上的字体嵌入到你的网页中。然后网页就可以使用这种字体。
基本用法:
@font-face {
font-family: 'fer';
src: local('fer'), local('fer'), url(https://fer.fuyeor.com/src/fer.ttf) format('truetype');
}
可选项 / 意思:
font-family:定义字体的名字。可以根据自己的喜好定义,例如 FER 字体可以定义为「FUYEOR-FER」、「FEOR」等等,需要注意的是如果网页中已经有字体使用了这个名字,再定义时前面的字体会失效。
src:url 是字体的路径。可以是自己网站的相对路径(/src/fer.ttf),可以是绝对路径,也可以是网络地址(https://fer.fuyeor.com/@assets/fonts/fer.ttf)。
format:定义的字体的格式,可以取的值为:truetype(.ttf)、opentype(.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)。
font-weight:定义加粗样式,800 或者 bold 就能够加粗字体。
font-style:定义字体样式,例如 normal、italic、oblique 等。
unicode-range:定义字体 unicode 范围。例如复玥语就是:U+F220-F314。
复玥语 Webfonts 的引入方法
1、<link> 标签引入方法
在网站 <head></head> 头部标签中加入本行代码:
<html>
<head>
<meta charset="utf-8">
...
<link rel="stylesheet" href="https://fer.fuyeor.com/src/font.css">
...
</head>
...
2、通过 CSS 文件的引入方法
<style>
/*
* 在html中使用本段代码,如在CSS中不要带【<style>标签】
* 通过使用如下的 HTML head 标签中引入 CSS,以引入字体。
* <link rel="stylesheet" href="https://fer.fuyeor.com/src/font.css" />
* 或粘贴以下CSS代码到网站配置:
*/
/*仅包含 FER 字符的字体,体积 10K 左右*/
@font-face {
font-family: 'lite-fer';
font-style: normal;
src: local('lite-fer'), local('lite-fer'), url(https://fer.fuyeor.com/src/fer.ttf) format('truetype');
unicode-range: U+F220-F314;
}
/*标准字体*/
@font-face {
font-family: 'feor';
font-weight: 900;
font-style: normal;
src: local('feor'), local('feor'), url(https://fer.fuyeor.com/src/feor.ttf) format('truetype');
unicode-range: U+F220-F314; /*仅对FER字符起效果*/
}
/*粗体*/
@font-face {
font-family: 'nis-fer';
font-style: normal;
src: local('nis-fer'), local('nis-fer'), url(https://fer.fuyeor.com/src/fernis.ttf) format('truetype');
unicode-range: U+F220-F314;
}
/*普通字体*/
@font-face {
font-family: 'lobo-fer';
font-weight: 900;
font-style: normal;
src: local('lobo-fer'), local('lobo-fer'), url(https://fer.fuyeor.com/src/lobofer.ttf) format('truetype');
unicode-range: U+F220-F314;
}
/*超细体*/
@font-face {
font-family: 'unterua-fer';
font-style: normal;
src: local('unterua-fer'), local('unterua-fer'), url(https://fer.fuyeor.com/src/unterua.ttf) format('truetype');
unicode-range: U+F220-F314;
}*/
</style>
这样网页里就可以显示字体:
feor
lobo-fer
unterua-fer
nis-fer