关于结对项目中网页字体的教程

@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，使用后节省了至少一半的时间