怎样让浏览器加载系统不自带的字体

来源:互联网 发布:人员素质测评软件 编辑:程序博客网 时间:2024/03/29 03:05

有时候我们需要浏览器加载一些自行设计的字体,这些字体在电脑的系统中是不存在的,而且是不被浏览器所支持的,如果我们需要使用这种字体就需要我们将字体做成各个浏览器都能支持的格式,一般来说我们需要设置四种格式。

这个主要应用到CSS3的@font-face,IE4就开始支持@font-face属性。

一、TureTpe(.ttf)格式:

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

二、OpenType(.otf)格式:

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

三、Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

四、Embedded Open Type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

五、SVG(.svg)格式:

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

一般我们都能找到.ttf格式,但是其他三种格式就要我们费一点脑筋了。我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或onlinefontconverter提供的在线字体转换服务获取

得到了这些字体之后,我们需要在样式表中进行声明

字体声明如下:
@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');


0 0
原创粉丝点击