字体样式针对前端工程师而言应当是较为熟悉又陌生这个概念，了解是由于会频繁使用 css 来设置字体，生疏是由于设计方案常常告诉你如何完成页面看上去和设计图字体样式不一样，有时候没弄明白也不知道该如何与设计表述，那此次会相对全方位地来了解一下前面字体样式的那些事儿。
一、应用
文字的应用我想大家都不陌生，在这里不会再进行讲，简单的说就是设定一串字体样式字符串数组，不同字体用分号分隔，电脑浏览器会依据字体安装状况从上向下选择用。其他信息可以参考一下 MDN 上边的 font-family有关文本文档。
二、检验字体安装
大多数人可能会对文字的应用就局限在上边那一步了，由于更细节上的归属于浏览器系统软件范围了，大家是没办法掌控的，但在一些特殊的商品比如文本文档，针对文字的应用就需要更加深入研究了，第一个很有可能遇到的困难便是检验当地装上哪些字体。
先讲结果：前面没办法检验当地安装了哪些字体，可是就可以知道是不是装上某一字体样式，所以使用穷举法能够间接性了解装上哪些字体。
2.1 字体样式名字
需要使用一个字体样式，首先要了解这个字体叫什么，绝大多数早已存有的字体样式在网上都可以找到相关信息，但如果是一些独有字体样式，比如阿里巴巴上线的阿里普慧体，那应该如何知道他在系统中名称是什么呢？这儿最好使用 safari 提示作用。
从上图能够看见，在设置 font-family 属性情况下，safari 也是有字体样式提醒的，但是用这一提醒能够间接性了解在系统内这个字体名称是什么。
2.2 特殊字体样式检验
知道字体样式名字，下面就可以开始检验了，检验很容易能想到的还是使用：
{
font-family: '检验字体样式';
}
可是这里有一个难题，从编码方面并不了解系统软件是不是用了这一特殊字体样式，那这儿解决方案相对比较 hack，那就是使用自定添加字体。
前面如何安装字体后边会出现详解，假定己经装上一个字体样式 TestFont，可是这个字体比较特别，它能够仅有一个字符，例如比较常见的 0，可是总宽是 0，那么接下来应用下边的书写：
{
font-family: "检验字体样式, TestFont";
}
运用浏览器字体样式返回水平，如果采用了我们应该检测字体样式，那通常情况下总宽应该不是 0，假如检测字体样式未安装，那么就会应用 TesFont，总宽就会成为 0，用这种方式就能知道字体样式是不是组装。可是本质上也有一些缺点，为了能快速检测，一般这种 TestFont 容积并不是很大，里边就真包括一个字符，那么如果待检验字体样式没有那个标识符，那么就会检验不上。充分考虑绝大多数字体样式都是有阿拉伯数，所以使用标识符 0 相对来说安全性。
对于怎么检测总宽，这种有两种方式：
方法一：应用 dom 的 getBoundingClientRect
方法二：应用 canvas 的 measureText
这里不展现有关编码了，我想大家都比较了解了。
2.3 突发情况
这儿分为两种情景应注意：
- safari 由于安全性缘故，并不是适用用户账户安装文字的
stackoverflow.com/questions/5…
www.reddit.com/r/MacOS/com…
因此在 safari 下，安装字体样式是检验不了的，目前也并没有打法
- 文字设置时需要注意冒号
字体样式标准里边要求文字的名字是有要求，若是有空格符、小数位、数据这些都是建议使用冒号的
因此
{
font-family: Gill Sans Extrabold, sans-serif;
}
这类书写合理合法但不强烈推荐，可是这里有一个坑，假如字体样式名字里有小数位，那么这种书写便是非法的，不容易起效，比如下面的：
// 不合规
{
font-family: Gill Sans Extrabold1.0, sans-serif;
}
// 合理合法
{
font-family: 'Gill Sans Extrabold1.0', sans-serif;
}
三、安装网络字体样式
上边的检测方式除了可以检验当地字体样式是不是组装外，也可以检测是否存在组装有关互联网字体样式，换句话说它不能区别字体样式是组装在本地系统软件还是用网络安装的。不管怎样，有了这样的水平之后，就也可以根据项目需求进行网络字体免费下载。
3.1@font-face
这一部分信息在MDN 上已经有着很详尽的实例教程了，这里不赘叙了。
现阶段鼓励的字体格式有 TTF、OTF、WOFF、WOFF2，之前的书写为了能兼容模式，因此能写全部格式字体样式，可是因为现在 WOFF2 的兼容模式已经非常好啦，因此业务流程要根据自己的适配情况来确定需不需要简单化文字设置。
3.2 document.fonts
这一绝大多数人该不太熟悉，都是用的相对性较少的插口，返回是 FontFaceSet，有 add、check、clear、delete 这些插口。
以下是 MDN 上边的添加字体的 demo：
const font = new FontFace("MyFont", "url(myFont.woff2)");
font.load().then(() => {
document.fonts.add(font);
},
(err) => {
console.error(err)
});
能够看见，FontFaceSet 里边存放是指 FontFace，FontFace 的第二个主要参数能够是一个文字的下载链接，还可以是 ArrayBuffer。
总体来说，document.fonts 的插口现阶段兼容模式也还是很不错的。
3.3 突发情况
前边讲过，假如字体样式里有小数位这样的事情，那安装的时候要用什么名称呢？通过检测，添加字体直接用原始字符串就可以了，不然会不起效：
// 设定
ele.style.fontFamily = '"Gill Sans Extrabold1.0"';
// 组装
const font = new FontFace("Gill Sans Extrabold1.0", "url(myFont.woff2)");
font.load().then(() => {
document.fonts.add(font);
},
(err) => {
console.error(err)
});
四、认证字体样式
安装网络字体样式后，就可以使用 font-family 来说是不是起效，可能有些人是由人眼来划分，但这个很有可能禁止或是较难，这儿可以利用浏览器水平来检验。
4.1 chrome
chrome 的 style 的 computed 控制面板里边，最底下一行会出现所使用的字体样式信息内容，通过这些就可以知道现阶段电脑浏览器用的都是哪一个字体样式
4.2 safari
safari 的调节控制面板里边内置了字体样式这一 tab，但这个好像禁止，比如在 mac 下，一样设定 Arial 字体样式，safari 表明 Arial，chrome 可以看到平方米，自然也可能是电脑浏览器在字体选择上面有差别，不能没有细究。
五、将来
能够看见，现阶段做出来的这项工作，大多都是由于电脑浏览器不可以前面直接访问当地字体样式，但从 Chrome 103 版本号逐渐，适用前面根据 window.queryLocalFonts 获得安装于当地的字体样式目录乃至浏览字体样式数据信息：
以下是 demo：
async function logFontData() {
try {
const availableFonts = await window.queryLocalFonts();
for (const fontData of availableFonts) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}
} catch (err) {
console.error(err.name, err.message);
}
}
因此在能够预见的未来，前面对当地字体样式可能有更高的控制力，很有可能会因此问世大量有意思创意及其运用，敬请期待！