admin 管理员组

文章数量: 887007

随着互联网的发展，越来越多以前不懂互联网的人也接触到了互联网。我们的客户对于互联网认知以及对于设计的要求是越来越高。设计师也是变成花样来满足客户的区中变态需求。 

我们经常在项目中遇到各种非常个性化的字体，做前端的朋友都会知道css3可使用font-face来实现服务器端字体。

没错，一下分享的正是font-face相关内容，不过不是如何使用font-face，而是分享一下转换字体的途径，具体请看下面内容 ?
 

Web字体格式介绍
1、TrueType (.ttf)
　　Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】； 


2、EOT – Embedded Open Type (.eot)
　　嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，浏览器根据 CSS 中 @font-face 的定义，下载，渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下，临时安装在用户的系统中。
 
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；


3、OpenType (.otf)
　　OpenType是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf，类型代码是OTTO，现行标准为OpenType 1.4。OpenType最初发表于1996年，并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。
 
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；


4、WOFF – Web Open Font Format (.woff)
　　相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来
 
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；


5、SVG (Scalable Vector Graphics) Fonts (.svg)
　　顾名思义，就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。


浏览器兼容性一览
使用CSS3的@font-face属性可以实现在网页中嵌入任意字体，但是IE只支持微软自有的EOT格式字体，而其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体，浏览器对@font-face属性及各种字体格式支持详的细情况如下：

注意：
1、以上内容收集于网络资料
2、现在高级浏览器的最新版本都是可以支持的，上面内容主要是给朋友们做个参考


下面给大家推荐几个咱在项目中经常使用的字体格式转换工具
Online Font Converter
https://onlinefontconverter/

 

Free Font Conve
http://www.freefontconverter/

 

The FontSquir­rel Con­verter
http://www.fontsquirrel/fontface/generator


fontconverter
http://www.fontconverter/


font-face generator
https://everythingfonts/font-face

Font 2 Web
http://www.font2web/

ttf 2 eot
http://ttf2eot.sebastiankippe/

otf 2 woff
http://orioneventxa/otf2woff.html


字客网
https://www.fontke/tool/fontface/
​​​​​​​

注意：
1、以上工具大多都是亲测可用的
2、英文字体在不考虑文字使用版权的情况下大多数都是可以直接转换成web字体的，当然中文字体只要不是特别大一般也可以的
3、上文都是国外网站，所以可能需要翻墙哦！

另外，再推荐几个国内的在线字库 ? 

1、有字库
https://www.youziku/
平台可以实现css引用和js引用2中方式，
but，平台分为免费用户和收费用户，免费用户是有使用次数限制的，具体收费情况可以自行到官网查询

2、justfont
http://cn.justfont/
类似"有字库"也提供收费方案

3、阿里巴巴
https://www.iconfont/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index
阿里全段时间推出了一个普惠体，可免费商用，不失为设计师一大福利啊

本文标签： 浏览器 字体 格式 字体转换 Font

版权声明：本文标题：font-face使用的web字体格式介绍、浏览器兼容和字体转换 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729175878h1327273.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。