CSS-自定义字体（LED）

字体的获取

先来看一下实现效果:

字体的文件可以在defont网站中找到自己需要的字体 。

然后通过fontsquirrel将下载好的字体文件转换为eot格式和woff格式。如果你需要做LED字体的话，也可以通过我的百度网盘获取（格式已经转换好了哟）。
链接：https://pan.baidu.com/s/1VjfVgsyisA-T1u4FRqW_Vg
提取码：d59j

生成字体

在拿到字体之后，我们把字体放到我们的项目，就可以通过@font-face自定义字体了。
代码如下：

在需要引入的vue文件的style处添加以下内容(url需要根据自己的文件路径修改)

 /* 自定义led字体 */
                              
     @font-face {
      font-family: 'UnidreamLED';
      src: url(../lib/UnidreamLED/UnidreamLED.eot);                                  
      src: url(../lib/UnidreamLED/UnidreamLED.eot?#iefix)format('embedded-opentype'),       
     url('../lib/UnidreamLED/UnidreamLED.woff') format('woff'), 
     local('UnidreamLED'), 
     url("../../lib/UnidreamLED/UnidreamLED.woff");
     }
                             

在需要使用他的时候就按照我们平常css定义字体的方式一样。

  font-family: "UnidreamLED";
  font-size: 28px;
  color: #FCFF00;

@FONT-FACE生成字体详解

 /* 自定义led字体 */
                              
     @font-face {
      font-family: 'UnidreamLED';
      src: url(../lib/UnidreamLED/UnidreamLED.eot);                                  
      src: url(../lib/UnidreamLED/UnidreamLED.eot?#iefix)format('embedded-opentype'),       
     url('../lib/UnidreamLED/UnidreamLED.woff') format('woff'), 
     local('UnidreamLED'), 
     url("../../lib/UnidreamLED/UnidreamLED.woff");
     }
                             

想要弄清楚@font-face生成字体，我们首先需要了解.eot,.ttf,.woff,.woff2这四种字体格式。

• eot ： 目前所有版本的IE浏览器都支持eot格式，并不是只有IE6-IE8支持。只是，IE6-IE8仅支持eot这一种字体格式。
• woff ：woff是专门为Web开发而设计的字体格式，其字体尺寸小，加载快。
• woff2 ：woff2是比woff尺寸更小的字体，只是此字体目前仅Chrome和Firefox支持的比较好
      关于这些字体格式的兼容性，大家可以自己去网上看can i use。假想一下，有可能你看见我这篇文章的时候，这些字体浏览器都支持了。

  

  
      咳咳，回到正题。在代码中，我们可以可以看到有两个src，为什么会有两个src呢？这里放两个src主要是为了测试工程师。因为测试工程师测试低版本的IE浏览器经常使用兼容模式，兼容模式的IE和原生同版本的IE的解析是有区别的。其中区别之一就是兼容模式的IE7和IE8不认识问号（？）,这才在前面多了一行的src。
      我们继续往下看，会发现?#iefix这个长得有点奇怪的东西，那么他是干嘛的了？在我们的地址后面加上他，是为了解决IE9之前的版本解析的问题。当src属性包含多个url()时，会把长长的字符串当做一个地址解析而返回404的错误。在加上问号之后，IE9之前的版本就会把问号后面的东西当做url的参数。
      接下来说一说format()这个功能符，它的作用是为了让浏览器提前知道字体的格式，以决定是否加载这个字体，而不是加载完了之后再判断。最好不要把它省略掉。
      最后说一说local()和src(),如果你使用的是系统安装字体，则使用local(),如果使用的是外链字体则使用url()。
  码字不易，点个赞吧！

版权声明：本文为weixin_43269298原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：css-自定义字体（LED）_小航同学的blog的博客-CSDN博客_css led字体