码迷,mamicode.com
首页 > 其他好文 > 详细

自定义字体的方法

时间:2018-03-07 16:26:48      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:方案   url   字体设计   boot   利用   推荐   理想   log   格式转换   

网页自定义字体终极教程(兼容各大浏览器)
作者:零度逍遥 | 时间:2014-08-25 | 浏览:1050 | 0 条评论
在我们浏览网页的时候,文字占据着网页的大部分空间,给我们提供重要的信息,所以作为前端开发工程师,我们有义务把网页的字体设计的更加美观,让用户看起来更加舒适,随着CSS3的出现,网页自定义字体收到越来越多的开发人员欢迎。

我想有人可能会像我一样,尝试搜索过各种方法,但都不是太理想,有的是加载不成功,有的则是兼容性不好,无奈,自己闷头研究,终于在今天有了个成果,给大家分享一下。

一、字体格式的了解
首先,我们要的字体格式有个了解,常用的字体格式有以下几种:TTF、WOFF、EOT、SVG。这些字体格式的说明,我就不细说了,想知道的可以百度一下,下面我关键说一下各大浏览器对这些字体格式的兼容性。

 

这张图片很明白的展示了各大浏览器对字体的支持情况,其中TrueType就是TTF格式,这个字体格式标准的浏览器都会支持,只有脑残的IE不认识,它只兼容EOT格式的字体,所以我们引入字体文件的时候最少要引入两种格式——TTF和EOT。

二、自定义字体方法:
主要是利用CSS3的font-face,代码如下:

@font-face {
font-family: "myFont"; //这里可以随意自定义字体名字
src: url(‘font.ttf‘); //引入字体文件
}
body {
font-family: "myFont"; //与font-face定义的字体名字保持一致
}
这段代码只针对标准浏览器有效,要做到兼容的话,终极解决方案是以下代码:

@font-face {
font-family: ‘MyFont‘;
src: url(‘font.eot‘); //针对IE9
src: url(‘font.eot?#iefix‘), //兼容IE6-IE8
url(‘font.ttf‘), //标准浏览器
url(‘font.woff‘), //标准浏览器
url(‘font.svg#MyFont‘); //不太常用
}
没有这么多格式的字体?简单,推荐一个字体格式转换网站:http://onlinefontconverter.com/ 很轻松完成各种字体格式转换

 

 

http://videojs.com/

 

 


http://www.bootcss.com/p/layoutit/

自定义字体的方法

标签:方案   url   字体设计   boot   利用   推荐   理想   log   格式转换   

原文地址:https://www.cnblogs.com/xuyanjiayou/p/8522727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!