随便网站不断优化，对网站的字体也要求越来越高了。很多网站会使用自定义的字体，不再使用系统自带的字体，这样可以美化网站。
Google Fonts
在字体库这方面，谷歌有着十分强大的字体库，我们只需要打开 Google Fonts网站 就可以查看到非常多的字体，这里字体不但全，而且还很方便下载，选择字体点击详情就可以看到下载按钮。
当整个字体下载下来后，我们就可以得到包含当前字体所有对应的 .ttf 的字体文件。
当看到上面字体时，一时有点懵哈，一个字体里面包含这么多的 .ttf 文件，我应该如何引用呢？每个文件又代码什么意思呢？让我们接着往下看。
Font Weight
对于CSS 样式中的 font-weight 也许大家并不陌生。平时我们要给字体加粗，是不是习惯性加上 font-weight: bold; 这样就得到了一个字体加粗的效果，但你会想，这个font-weight和上面字体文件有什么关系呢，当时我也没想明白他们之间有什么关系。然后我就返手去搜索一个 font-weight 样式定义规则，在 font-weight样式介绍 中，我看到下面有一行这样的介绍，里面对应的数值和我们字体文件的名称能一一对上。
所以得到，这个100-900的数值就是对应上面字体的精细，所以当我选择了当前字体和选择对应精细值的时候，就会引入上面对应的字体精细。
.woff2 字体格式
简单来说，.woff2 是一种网页字体文件格式。它就像是你在网站上看到的那些漂亮、非默认字体的“安装包”。浏览器下载并“安装”了这个文件后，就能以你设计的方式精确显示文字。最关键的一点是：WOFF2 本身不是一种新的字体类型，而是一个“容器”或“包装格式”。它内部封装了其他的字体格式（如 TTF 或 OTF），并对其进行了极致的压缩，使其专为网络传输而优化。WOFF2 得到了所有现代浏览器的完美支持（Chrome, Firefox, Safari, Edge, Opera 等）。目前几乎所有网站开发都已将 WOFF2 作为首选的、默认的字体格式。
当我们在谷歌字体里面可以看到引用方式：
上面我们可以发现，我们引入并不是 .woff2 文件，而是一个 CSS 引入，没错，如果你想得到一个 .woff2 的样式的话，我们可以直接复制这个样式表的连接，在浏览器打开，我们就可以获取到最新 .woff2 文件了。
这样我就拿到我们需要的 .woff2 格式文件了。且通过上面样式，我们可以设置当前字体为 Work Sans 字体。
总结
随着网页文字越来越丰富，默认字体已经远远不能满足网页设计，所以通过上面方式引入谷歌字体，让网页看起来更美观，且使用 .woff2 文件格式实现快速、高效、美观的文字显示。
发表评论
全部评论 (0)