关于CSS3的font-face 小tips~

先来说下来总结这个小知识点的起因吧，就是一个妹子问我怎么把一种特殊字体写在页面里，我看过之后告诉她：“没办法写啊，因为你的浏览器不认识这个字体，而且还会有一堆浏览器兼容问题，最好的方法就是切图吧，放图片，balabala~~~”。但是之后，妹子突然给我发了一个截图，告诉我只要把那些.ttf,.svg,.woff的文件引页面，是可以实现的。好奇心使我摆渡起来，最后发现，哇塞，居然真的有这个属性可以自定义。在此，为我的愚蠢道歉。。。。

经过多方百度测试，一下总结下注意或者是用法：

1.在样式里自定义并引用字体文件，如图所示：

2.我自定义的字体名为“myFont”,不过建议大家还是把名字定义成字体名称比较好（截图内命名方法不建议哦~~）。然后在你需要用到特殊字体的地方，通过font-family加上就可以啦。

3.在我第一次试的时候，IE浏览器有警告提示： @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。

最后发现是因为format里的内容，我原来写的是“truetype”，但是改过来后就好了，这个原因我不是很清楚，如果有碰巧看到这篇文章又知道怎么回事的大佬，还望指教。

4.为了兼容不同浏览器，需要不同格式的，比如ttf,svg,woff,eot,所以推荐一个可以获取不同字体格式的网站，点这里：生成文本格式。使用方法也非常简单，点击upload把你要转换的字体上传，然后再勾选agreement开始生成，生成完成后下载，就可以在自己的项目中使用了。

以上~~~

2019年7月11日最新补充：

因为最近看微博PC端的源码，发现了他们的图标貌似是有一套自己设计定义的，于是去四处搜了搜。结果发现了一个软件，叫做“FontCreator”,这个软件提供了一些常用的数字，字母，符号等，你可以对这些符号进行再次设计，然后在生成.ttf或者其他格式的文件引入到页面里，这样你就可以拥有自己的一套图标字体了。