@font-face语句如何嵌入中文字体

什么是@font-face

    @font-face是一种网络字体，是CSS的模块,利用CSS的@font-face属性可以在网页中嵌入任意字体。

    字体使用是网页设计中不可或缺的一部分。网页是文字的载体，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。

   美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：　　一、不可能大范围的使用该字体；　　二、图片内容相对使用文字不易修改；　　三、不利于网站SEO。　　网络上有一些使用sIFR技术、或javascript/flash hack的方法，但实现起来或繁琐，或有缺陷。而只有通过CSS的@font-face属性来实现在网页中嵌入字体的方法逐渐成为主流。

@font-face语句格式

主流浏览器都能很好地支持@font-face，但对于嵌入的字体文件的识别，却是各有各的喜好。

所以在写@font-face语句之前，需要获取要使用字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。

• .TTF或.OTF，适用于Firefox 、Safari、Opera
• .EOT，适用于Internet Explorer 4.0+
• .SVG，适用于Chrome、IPhone
• .WOFF 知用于Chrome、Firefox

四种格式的文件准备好以后，就可以写@font-face语句了，格式如下：

@font-face 

{

  font-family: 'fontNameRegular';

  src: url('fontName.eot');

  src: local('fontName Regular'),

  local('fontName'),

  url('fontName.woff') format('woff'),

  url('fontName.ttf') format('truetype'),

  url('fontName.svg#fontName') format('svg');

}

在页面中需要的地方使用该字体：

p { font: 13px fontNameRegular, Arial, sans-serif; } 或

h1{font-family: fontNameRegular}

@font-face实现-英文

   英文字体实现@font-face的方法比较成熟，有时候看老外的个人技术博客，经常能遇到。做法相对中文简单很多，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF文件，我们需要通过这种文件格式转换为其余三种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或codeandmore提供的在线字体转换服务获取。

@font-face实现-中文

    @font-face是老外发明的，所以他们从来没想过中文的情况，中文一套字体一般要3-6M这样的庞然大物嵌入网页上，结果可想而知，在页面加载完成前已经被关掉了。

    当然，不是说中文就无法通过@font-face实现嵌入，但需要再麻烦一步：按需截取（根据文章所涉及到的文字生成小字库），如此便能最大程度地节约流量，将字体减到最小。

    可以在网上下载fontcreator用Unicode码来找到需要的字，保留需要的字其他的全删掉。

   确实麻烦。有没有更快一点的方法？有的！！！

英文比较专业的有 TypeKit.com和fontdeck.com

中文比较专业的有 youziku.com(有字库)

中文的用起来还是比英文的麻烦，英文的直接引用就可以了，整套字体被嵌入网页速度也不受影响（一般英文一般一百多K），中文的无论如何都要先截取一下的。

    不过好在"有字库"网站功能还挺人性化，所有浏览器支持的格式（.EOT.TTF.WOFF.SVG）都自动为你生成好，你只需要提交你需要的字就可以了。甚至还有一种js方式，只需要引用一段js代码，不需要提交文字就能自动根据文章生成小字库了。非常方便。如果你想用中文@font-face那我推荐"有字库"。

不可滥用@font-face

  凡事讲究度，网页上的美化小技巧，就像做菜放的调味料，放一点美味，放多了就反胃了。

  @font-face也是如此，如果在页面上大面积应用，页面体验反而会下降，亲自已斟酌吧。

 

转载于:https://www.cnblogs.com/webfont/articles/3490369.html