前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS调用远程字体

CSS调用远程字体

作者头像
大江小浪
发布2018-07-25 09:42:25
2.9K0
发布2018-07-25 09:42:25
举报
文章被收录于专栏:小狼的世界

CSS中的@font-face方法可以调用服务器端的字体。

Demo 可以参考:http://idv3.sinaapp.com 中标题字体的用法,具体用法如下:

@font-face { 

     font-family:name; 

     src: local('Ubuntu'), url(url) format('woff');

     sRules

}

兼容性的情况,Chrome、Firefox、Opera均没有问题,IE系列不支持 .ttf 和 .otf。兼容IE需要 .eot 或者 .woff 的字体格式。

看了[参考资料1]的文章,使用 font-face 有不需要本地字库支持就能够保持字体样式一致,而不必使用图片代替的优势,缺点就是有可能会消耗加载的时间。

那么为了更好的使用font-face,我们需要做的就是提高字体的加载及响应时间。

对于字体的Format,主要有以下几种字体:

1、TrueType(.ttf)格式。

.ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式。

2、OpenType(.otf)格式。

.otf字体被认为是一种原始的字体格式,其内置在TrueType的基础上,提供了更多的功能。

3、Web Open Font Format(.woff)格式。

.woff字体是Web字体中最佳格式,是一个TrueType的压缩版本,同时也支持原数据包的分离。

4、Embedded Open Type(.eot)格式。

.eot字体是IE专用字体,可以从TrueType创建此格式字体。

5、SVG(.svg)格式。

.svg字体是基于SVG字体渲染的一种格式。

参考资料:

1、CSS调用服务器端字体的利与弊

2、Google Webfonts

3、EOT网页字体嵌入技术

4、http://www.fontsquirrel.com/fontface/generator

5、CSS的Font-face

@import url(http://www.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2012-11-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档