Web字体的使用

在Web开发中有时候会需要一些特殊样式的字体(不要问我为什么：为了装逼)。你一般都会怎么处理这个问题呢？

font-family

这个是css设置字体的属性：

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
1
2
3

但是这种方式能设置的样式非常大众，很难给人一种耳目一新的感觉。所以我试图找到一种其他的方式，来设置字体样式。

这里可以找到了一些线索

@font-face

在 CSS 的开始处有一个@font-face块，这意味着任何支持 Web 字体的浏览器都可以使用您指定的字体，它指定要下载的字体文件：

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}
1
2
3
4

如果你用过阿里的图标库，应该对上面的语法感到熟悉，这时我们已经意识到它的功能很强大，因为图标也可以当成字体引入你的项目中。

在这个下面，你可以使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}
1
2
3

要寻找一种好看字体，我们的任务就转移到寻找.ttf, .woff, .woff2…… 这些文件

网页开放字体格式 (WOFF)（Web Open Font Format，网页开放字体格式）是由 Mozilla 与 Type Supply、LettError 及其他组织协同开发的一种新的网页字体格式。

注意：

• font-family里字体随便写（没有在font-face引入字体文件），不会涉及到侵权的问题。
• 如果你要在font-face里引字体文件的话，就得用免费的或者已购买的字体，开源中文字体比较少。

可用的font-face资源

在这个网站 中文字体免费预览下载，有很多好看的字体，可供个人使用，但是如果要商用请注意商用授权。

这种手写的质感，逼格是不是高了很多。

其实，除了使用这个font-face我们可以导入字体的样式文件，比如 Google font（完全免费开源）。下一篇文章 来介绍一下谷歌字体的用法。

如果文章帮到了你，请帮忙点赞，谢谢啦。