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

参考资料:
相关文章
|
11月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
10月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
223 4
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
196 28
|
11月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
130 4
|
Web App开发 前端开发 Windows
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
177 0
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
487 0
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
322 6
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
149 1
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
169 1