CSS调用远程字体

简介: 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。
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字体渲染的一种格式。

参考资料:
相关文章
|
3月前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
7月前
|
前端开发
【CSS】CSS字体样式【CSS基础知识详解】
【CSS】CSS字体样式【CSS基础知识详解】
|
3天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
4天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
8天前
|
前端开发
css_字体混合正片叠底与发光
css_字体混合正片叠底与发光
11 0
css_字体混合正片叠底与发光
|
10天前
|
前端开发 开发者 流计算
css字体
【4月更文挑战第23天】css字体
11 3
|
14天前
|
前端开发
css 字体渐变样式(设置字体渐变样式+附加实现源码)
css 字体渐变样式(设置字体渐变样式+附加实现源码)
14 0
|
18天前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
59 1
|
4月前
|
前端开发
让页面里的字体变清晰,变细用CSS怎么做?
让页面里的字体变清晰,变细用CSS怎么做?
48 2
|
4月前
|
Web App开发 前端开发
CSS:字体和文本样式
CSS:字体和文本样式
40 0