CSSWebFonts⽹络字体
Fonts
1. CSS font-family
在 CSS 中，可以使⽤ font-family 属性来指定字体，浏览器渲染⽂字时候会根据这个属性应⽤于元素。如果没有指定这个属性或者指定的字体不存在于客户的计算机上，则浏览器会使⽤默认字体。
<style>
.line {
svg如何打开font-family: 'Courier New', Courier, monospace;
}
</style>
<p>Hello World!</p>
如果没有设置 font-family，浏览器会使⽤默认字体应⽤于元素。
如果 font-family 属性指定的字体，在本地计算机没有，则使⽤默认字体
如果字体的名称有空格，则必须要使⽤引号。
使⽤ font-family 属性可以指定⼀个字体，也可以指定⼀组字体列表——将多个字体⽤逗号分割
如果指定⼀组字体列表，则会依次查，第⼀个字体本地没有，则使⽤第⼆个。如果指定的字体列表中的字体，本地计算机都没有，则浏览器使⽤默认字体应⽤于元素
2. Web safe fonts (⽹络安全字体)
系统中通常只有⼀定数量的字体可⽤，并且不同的系统中的字体可能不相同，所以在 Windows 上可以⽤的字体，在其他系统中不⼀定可以⽤。
开发者指定的字体，在⾃⼰的电脑上已经被安装，所以可以正常显⽰。但客户端机器并没有安装整个字体，则客户端会使⽤默认字体显⽰。所以开发者考虑哪⼀些字体是客户端基本都会被安装的。
3. Web fonts (⽹络字体)
Web 字体是⼀种 CSS 功能，允许指定的字体⽂件被下载到本地。
这是⼀种⾮常有效的⽅式，这样字体就不受限于本地是否安装了字体，⽽且⼤部分浏览器都⽀持Web 字体。
⽹络字体使⽤⽅式：
Setp 1 下载⽹络字体；在 CSS 中，使⽤ @font-face关键字下载⽹络字体，有2个必要属性
src指定字体资源，
font-family⾃定义⼀个名称。
@font-face {
font-family: "myFont";
src: url("f");
}
Setp 2 使⽤字体；设置font-family属性，⽽这时font-family设置的是⽹络字体的名称，⽽不再是系统的字体。(⽹络字体的名称在上⼀步已经定义。)
.line {
font-family: 'myFont;
}
3.1. 关于Web字体
1. Web 字体作为⼀种技术，从 IE 4 开始就得到了⽀持。
2. 浏览器⽀持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器⽀持。
⼤多数浏览器都⽀持WOFF/WOFF2(Web Open Font Format versions 1 and 2, Web 开放字体格式版本1和2)，它是最有效的格式，但似乎旧版本IE只⽀持EOT(Embedded Open Type, 嵌⼊式开放类型)的字体，可能需要包含⼀个SVG版本的字体⽀持旧版本的 iPhone 和 Android 浏览器。
3. 字体⼀般都不能⾃由使⽤。必须为他们付费，或者遵循其他许可条件，⽐如在代码中(或者在您的站点上)提供字体创建者。不应该在没
有授权的情况下偷窃字体。
3.2. 字体格式
TureType(.ttf)格式
.ttf 字体是 Windows 和 Mac 的最常见的字体，是⼀种 RAW 格式，⽀持这种字体的浏览器有 ID9+、Firefox3.5+、Chrome4+、
Safari3+、Opera10+、iOS Mobile、Safari4.2+
OpenType(.otf)格式
.otf 字体被认为是⼀种原始的字体格式，其内置在 TureType 的基础上，⽀持这种字体的浏览器有 Firefox 3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+
Web Open Font Format(.woff) 格式
.woff 字体是 Web 字体中最佳格式，它是⼀个开放的 TrueType/OpenType 的压缩版本，同时也⽀持元数据包的分离，⽀持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
Embedded Open Type(.eot)格式
.
eot 字体是 IE 专⽤字体，可以从 TrueType创建此格式字体，⽀持这种字体的浏览器有 IE4+
SVG(.svg)格式
.svg 字体是基于 SVG 字体渲染的⼀种格式，⽀持这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+
不同的浏览器⽀持的格式不同，⼀些浏览器的⽼旧版本，它们只⽀持⽼旧版本的字体格式。例如，⼤多数现代浏览器都⽀持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只⽀持EOT (Embedded Open Type，嵌⼊式开放类型)的字体，你可能需要包括⼀个SVG版本的字体⽀持旧版本的iPhone和Android浏览器
所以我们⼀般都会把这⼏种字体都提供，让浏览器⾃⼰选择，这样可以获得更好的兼容性。
字体⼀般不能⾃由使⽤，必须要付费，或者遵循⼀些条件。不应该在没有授权的情况下偷窃字体。
3.3. 声明字体，@font-face
@font-face {
font-family: 'myFont';
font-display: swap;
src: url(''); /* IE9 */
src: url('?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'), /* chrome、firefox */
url('f') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
font-family定义字体的名称，就像“宋体”，“微软雅⿊”，“console”之类的内置的字体⼀样。
src有2部分：
url：指定要导⼊（下载）的字体⽂件的路径
format：声明字体⽂件的格式，它允许浏览器更快地到可以使⽤的字体，可选项。
src可以列出多个声明，⽤逗号分隔。
浏览器按声明顺序到它可以使⽤的字体，因此把最好的格式放在前⾯，把⽐较久的格式放在后⾯。⽐如WOFF2⼀般放在最前⾯，TTF放在最后⾯。
eot字体和IE是⼀个例外，eot是IE创建的⼀种格式，只有IE⽀持，并且IE9不⽀持format声明，所以会有2个src声明，其中⼀个是专门针对eot和IE9的
4. 获取⽹络字体
可以通过⼀些字体服务商获取字体，有⼀些是收费的，也有⼀些是免费的。
4.1. 通过互联⽹获得字体，使⽤ iconfont
国内也有不少⽹站提供字体，但⼀般⽤阿⾥的，在⾸页上⽅的菜单栏选择
Step 1 在最上⾯的⽂本框中输⼊要应⽤字体的⽂字，⽐如：
我是⼀个任性的孩⼦，我希望，每⼀个时刻都象彩⾊蜡笔那样美丽。
（输⼊的这⾏句⼦总共有30个⽂字）
Step 2 添加你要应⽤的字体格式。
Step 3 下载并解压⽂字，
在你需要应⽤的字体⽂字的展⽰框⾥，选择本地下载，下载得到⼀个zip⽂件，将其解压，就得到了字体⽂件。
阿⾥提供了在线引⽤和下载到本地两种引⽤⽅式，但这⾥我们选择下载，本地测试不能使⽤在线引⽤。@@@具体官⽅有解释，参考官⽅的⾥ Q&A 的第三条。
解压之后会看到有.eot .svg .ttf .woff .woff2 这些格式的⽂件，这些就是字体⽂件。
4.2. 简单了解字体⽂件
这些⽂件直接打开，基本都是乱码，没法直接查看，唯独.svg我们是可以直接打开的。
打开.svg我们可以发现2个重要的东西：
（针对我刚才那段⽂字⽣成的svg）⾥⾯总共有26个<glyph>元素
每个元素都有⼀个unicode属性
⾸先来看unicode属性：
这个unicode属性就是表⽰⼀个⽂字的unicode码，我们截取刚才输⼊⽂字的部分，看下⾯⽂字和unicode编码的对照：
我是⼀个任性的孩⼦，
我是一个任性的孩子，
我是一个任性的孩子，
（第⼀⾏是⽂字，第⼆⾏是对应的10进制unicode编码，第三⾏是对应的16进制unicode编码）
.svg⽂件⾥的unicode使⽤的是16进制unicode编码，所以把上⾯的16进制unicode编码去.svg⽂件⾥查，每⼀个都能到。并且仔细看
<glyph>的排序⽅式，是根据unicode编码顺序排序的。所以每⼀个<glyph>都对应了⼀个⽂字的unicode和显⽰（属性d）。
再来看<glyph>元素：
每⼀个<glyph>都对应了⼀个⽂字的unicode和显⽰（属性d），但这⾥总共只有26个<glyph>，⽽我们的⽂字总共有30个，为什么只有26个<glyph>呢？
因为我们输⼊的30个⽂字中有3个⽂字是重复的：“我”，“⼀“，“，”（逗号）。不重复的⽂字共26个，所以阿⾥的 iconfont 只给我们⽣成了我们输⼊的这个26个⽂字，并且是根据unicode编码顺序排序的。所以这⾥要注意我们下载的字体只有这26个⽂字，其他⽂字没有这种字体。
另外还有个.html⽂件，这是使⽤字体的详细步骤，共3步。
4.3. 声明和使⽤字体
其实使⽤⽅式在 .html ⽂件⾥都有说明，跟着操作即可。
<style>
/* 第⼀步：使⽤font-face声明字体 */
@font-face {
font-family: 'hello-web-font';
font-display: swap;
src: url('');
/* IE9 */
src: url('?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
/* chrome、firefox */
url('f') format('truetype'),
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont.svg#webfont') format('svg');
/* iOS 4.1- */
}
/* Step 2, 定义使⽤ webfont 的样式 */
.my-web-font {
font-family: "hello-web-font" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<!-- Step 3. 为⽂字加上对应的样式 -->
<p class="my-web-font">我是⼀个任性的孩⼦，我希望，每⼀个时刻都象彩⾊蜡笔那样美丽。</p>
<p class="my-web-font">我希望，能在⼼爱的⽩纸上画画，画出笨拙的⾃由</p>
上⾯的例⼦中，特地多加了⼀⾏话，来看⼀下结果：
我是⼀个任性的孩⼦，我希望，每⼀个时刻都象彩⾊蜡笔那样美丽。
我希望，能在⼼爱的⽩纸上画画，画出笨拙的⾃由
结果差不多如上⾯这种效果，为什么有⼀些字体被改变，有⼀些使⽤的确实默认字体呢？
因为我们⽣成的字体⽂件只有我们⽣成的那26个⽂字，第⼀⾏就是我们⽣成的内容，所以第⼀⾏全部改变了字体，⽽第⼆⾏只有字体⽂件中包含的那⼏个⽂字（unicode编码），才会有对应的字体实现。
5. 字体图标
⾸先来看⼀下不同的字体，下⾯有3种不同的字体，分别是：默认字体、vivaldi 字体、Wingdings 字体。
（这个3个字体都是 Windows 系统默认就已经安装的字体）
<span>ABC123</span>
<span >ABC123</span>
<span >ABC123</span>
上⾯的代码输出结果如下：
ABC123
ABC123
ABC123
第⼀⾏是默认字体。
第⼆⾏字体⾮常漂亮，但也很好理解，因为我们在处理⽂档时会经常使⽤各种漂亮的字体。
第三个就⽐较奇怪了，第三⾏就是"ABC123"，但是字体把他显⽰成了"特殊"的⽂字，⽤户感觉这不像⼀个⽂字，更像⼀个图标，但本质上他就是⼀个⽂字、⼀段编码。
所以字体图标就是⼀个⽂字，称作字体“图标”是因为应⽤某个字体之后，这个⽂字看上去“像”⼀个”图标“。
5.1. 字体图标的应⽤
⽹站上总是有各种图标，⽐如返回按钮有⼀个表⽰返回的⼩图标，⽐如菜单栏——⽤户信息⼀般有个⽤户⼩⼈图标，购物车有个购物车图标。
以前⼩图标都是⽤精灵图处理，精灵图处理有3个缺点
要写样式
精灵图是⼩图⽚，放⼤会失真
精灵图是图⽚，⽆法修改颜⾊
在CSS中，可以使⽤字体图标替代精灵图，并且有许多优点：
1. 将所有图标打包成字体库、减少请求（字体被打包，访问⽹页时候⼀次性被下载）
2. 具有⽮量性，放⼤不会失真，随意放⼤缩⼩可保证清晰度
3. 使⽤灵活，便于维护（因为他是⼀个⽂字，所以可以所以修改颜⾊、样式、⼤⼩等；对字体应⽤字体样式要⽐修改图⽚灵活的多。）
5.2. 通过互联⽹获得字体图标，使⽤ iconfont
字体图标本质上就是⽂字，所以⽣成字体图标和⽣成Web字体没有任何区别。在⾸页上⽅的菜单栏到图标库 -
在图表库中搜索⾃⼰想要的图标，然后⿏标移动到图标上选择那个”购物车“，把图标保存到⾃⼰的购物车⾥。
图标都添加完成之后，选择右上⾓的购物车，然后在购物车⾥选择添加到项⽬。（如果没项⽬则添加项⽬）
然后进⼊项⽬页⾯，在项⽬页⾯选择“下载到本地”
打开⽂件夹会发现和⽹络字体⼀样，会有多个字体⽂件和⼀个demo.html。详细操作在demo.html⾥头都有。
接下去，使⽤⽅式就和⽹络字体⼀样（使⽤unicode字体），
Step 1 声明字体，使⽤@font-face
Step 2 定义样式
Step 3 应⽤样式，注意：这⼀部需要指定具体unicode编码
使⽤字体图标的步骤 Step 3 看上去略微不同——需要⾃⼰指定unicode编码，但实际上和字体⽂字⼀样（字体图标就是字体⽂字），因为在字体⽂字⾥头，我也强调了我们只下载了我们⽣成的⽂字，如果对字体⽂件⾥没有的⽂字应⽤该字体，则这些⽂字不会有任何变化，会使⽤默认字体显⽰。所以字体图标的 Step 3 ——要指定⾃⼰的unicode编码，其实和字体⽂字⼀样，只不过字体图标在使⽤的时候我们就是要使
⽤指定的图标（⽂字），所以你需要使⽤哪个图标，就要在这⾥使⽤对应unicode编码。
前⾯两个步骤和字体⽂字⼀样，且demo.html种已经有详细描述，只是 Step 3 要注意使⽤对应的unicode编码，⽐如我使⽤的⼀个购物车图标的unicode编码是：
<span class="hello-icon-font"></span>
5.3. 结合伪元素使⽤
unicode编码的⽅式出现在 HTML ⾥头，不直观，如果光看代码，不可能知道这表⽰⼀个购物车“图标”
<span class="my-icon-font"></span>
使⽤CSS伪元素添加⽂字（unicode编码），并且通过给CSS样式的名称更加直观，这是⼀个好主意。
⽐如：
Step 2 定义字体图标样式
.my-icon-font{
font-family: hello-icon-font;
}
Step 3 使⽤伪元素，因为这个“图标”表⽰⼀个购物车，所以给定义的样式名称叫“cart”，这样更直观。
.
cart::before{
content: "\e641"; /*  */
}
既然是⼀个字体，就能修改字体属性，（之前样式写在 Step 2 ⾥）
.cart::before{
content: "\e641"; /*  */
color: red;
font-size: 50px;
}
Step 4 就是原来的 Step 3 ，应⽤样式到元素
<span class="my-icon-font cart"></span>
参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。