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

浅谈@font-face

时间:2019-09-29 12:55:05      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:androi   xpl   使用   语句   表示   制作   安装   c中   and   

@font-face功能

制作网站难免有些字体不是默认的,通过@font-face可以加载自己特定的字体,来实现特定的文字效果。
@font-face语句是css中的一个功能模块,用于实现网页字体多样性(设计者可随意指定字体,不需要考虑浏览者电脑上是否安装)。主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,@font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展,@font-face 价值越来越凸显,然后再次被纳入 CSS3 草案中。@font-face规则 是为了解决由于浏览者系统中没有安装字体导致不能显示的问题。

@font-face用途

1.字体文件名简写

@font-face {
  font-family: ‘YT‘;
  src: url(‘YourWebFontName.eot‘),local(‘YourFontName.eot‘);
}

然后在任何需要使用YT字体的地方就可以直接使用font-family:YT;

提示:
a.src属性定义字体的下载地址,local表示本机地址,url表示网址(比如使用服务器上下载的字体)
b.如果在src上定义了多种字体,他们也是候选关系,如上段代码
c.如果修改了src中定义的字体或者顺序,一定要关闭浏览器再打开才能看到修改后的效果,刷新是看不到的。

 

2.使用服务端字体

@font-face浏览器兼容

由于每种浏览器对@font-face的兼容性不同,不同的浏览器对字体的支持格式不同,这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。.TTF或.OTF,适用于Firefox 3.5、Safari、Opera;.EOT,适用于Internet Explorer 4.0+;.SVG,适用于Chrome、IPhone, 获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。

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

下面要解决的是如何获取到某种字体的这三种格式文件。一般地,我们在手头上(或在设计资源站点已经找到)有该字体的某种格式文件,最常见的是.TTF 文件,我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel(http://www.fontsquirrel.com/tools/webfont-generator)或 onlinefontconverter提供的在线字体转换服务获取。获取到三种格式的字体文件后,下一步要在样式表中声明该字体,并在需要的地方使用该字体。

@font-face {
font-family: ‘YourWebFontName‘;
src: url(‘YourWebFontName.eot‘); /* IE9 Compat Modes */
src: url(‘YourWebFontName.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
         url(‘YourWebFontName.woff‘) format(‘woff‘), /* Modern Browsers */
         url(‘YourWebFontName.ttf‘)  format(‘truetype‘), /* Safari, Android, iOS */
         url(‘YourWebFontName.svg#YourWebFontName‘) format(‘svg‘); /* Legacy iOS */
}

 

浅谈@font-face

标签:androi   xpl   使用   语句   表示   制作   安装   c中   and   

原文地址:https://www.cnblogs.com/liAnran/p/11606977.html

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