持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

在之前我们有设置过页面使用的字体: font-family

• 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

• 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;

• 这就是所谓的 Web-safe 字体，并且这种默认可选的字体并不能进行一些定制化的需求;

比如下面的字体样式, 系统的字体肯定是不能实现的

那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可

在我们的CSS代码当中使用该字体（下面写）

用户的角度:

• 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;

• 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；

• 在浏览器中使用对应的字体显示内容；

附上一个字体网站：www.fonts.net.cn/fonts-zh-1.…

使用方式：

1. 到上方网站下载字体

2. 将下载的 .ttf 文件放到我们能找到的目录中

3. 通过 @font-face 使用（详细请看代码）

   Document body { margin: 0; padding: 0; } @font-face { font-family: "anyname"; src: url(./fonts/JiZiJingDianXingCaoJianFan-Shan\(GEETYPE-XingCaoGBT-Flash\)-2.ttf); } body { font-family: "anyname"; } .poet { /*wirting-mode实现竖直排版*/ writing-mode: vertical-rl; font-size: 40px; background-color: bisque; } .poet h1 { margin-top: 4em; } .poet p:not(.author) { letter-spacing: 0.5em; line-height: 1.5em; margin: 2em; } .poet .author { text-align: right; }

   将进酒

   君不见黄河之水天上来，奔流到海不复回。
   君不见高堂明镜悲白发，朝如青丝暮成雪。
   人生得意须尽欢，莫使金樽空对月。
   天生我材必有用，千金散尽还复来。

效果图就如封面所示，不得不说还是挺好看的。对于本文讲的 web字体，关键代码其实就只有下面这一点代码：

**关于web-fonts的兼容性：**现在能见得到的浏览器基本都支持 ttf 文件，包括在阿里的字体图标网站下载的字体图标现在也是 ttf 的，所以现在已经不需要考虑这个问题了，如果真啥时候碰到了，那再查就行了。