关于结对项目中网页字体的教程
@font-face
## 前言
- 怕自己忘了，所以写一篇博客，另外，也有人问了，干脆写详细一些
- 我为什么要用这种方法
- 自带的字体不好看
- 没有在线的引入的中文字体
- 做成图片麻烦并且不易维护
- 并没有在这次的项目中考虑浏览器的兼容问题
- @font-face的官方介绍css3字体
## @font-face的使用方法
-
@font-face语法
-
在css中直接调用
font-family:"dot"; -
在调用的css文件头写上
-
@font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } -
各种浏览器对应的不同的字体文件
- Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
- Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
- Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
-
-
@font-face怎么用
- 怎么生成对应的字体文件
- 首先，下载好你需要的字体文件，一般都是ttf格式
- 可以搜索在线生成字体网站，我用的是@font-face生成器
- 按照网站上的教程，把字体拖进对应的位置，选择生成
- 需要等待一段时间，网站会提示下载，下载生成的zip或者rar包
- 包内会有css标识，是对应的css代码，可以直接复制粘贴进自己的css文件中
- 我遇到的问题是，idea会提示，woff2格式的出现warning，直接删掉与woff2相关的就可以了
- 怎么引入项目中
- 在项目中新建一个文件夹放入所有生成的字体，建议放在与网页页面同级的路径下
- 在所有用到了你引入的字体的css文件中头部加入这一段代码
- 怎么生成对应的字体文件
-
@font-face会对项目造成什么影响
- 好的方面
- 当然是好看
- 是用正确的字体会减少很多麻烦，比如使用图片会造成一定程度上页面放大缩小格式变动的问题
- 不好的方面
- 加载慢
- 在自己的本地启动项目不会出现这种问题
- 部署到服务器后，每次打开网页都需要加载项目中的文件，直接引入所有的字体文件会比较缓慢，造成网页打开慢的情况（比如我的项目）
- 不同的浏览器下，字体的显示情况也可能不一样，并不一定美观
- 其实我的项目有这种问题，火狐和谷歌打开就不太一样，有一个略显臃肿
- 加载慢
- 解决办法
-
只是一定程度上加快网页加载
-
使用字体压缩器
-
网上有很多，比如font-spider，fontmin
-
我使用的是fontmin - 字体子集
-
官网长这个样子
-
-
直接点击应用，可以下载软件使用，默认是windows系统的，下方也可以选择下载os系统的
-
-
就是直接把压缩包打开，然后可以看到exe文件，执行就可以了，但是不会自动在桌面生成快捷方式，需要自己添加
-
使用也简单，将用到的文字打在左边，把需要的ttf字体拖进下方的字体框，右边可以直接看到字体的效果，还能及时看到字体有没有用……我就是这样换了一个字体的
-
-
-
最后的结果是没有是用软件之前，加载fonts文件夹用了接近60s，使用后节省了至少一半的时间
-
- 好的方面
