在之前我们有设置过页面使用的字体: font-family
- 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
- 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;
- 这就是所谓的 Web-safe 字体，并且这种默认可选的字体并不能进行一些定制化的需求;
比如下面的字体样式, 系统的字体肯定是不能实现的
那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可
在我们的CSS代码当中使用该字体（下面写）
用户的角度:
- 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
- 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；
- 在浏览器中使用对应的字体显示内容；
附上一个字体网站：www.fonts.net.cn/fonts-zh-1.…
使用方式：
- 到上方网站下载字体
- 将下载的 .ttf 文件放到我们能找到的目录中
- 通过 @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 的，所以现在已经不需要考虑这个问题了，如果真啥时候碰到了，那再查就行了。
