CSS3 字体
CSS3 @font-face 规则
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3,web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
浏览器支持
属性 | 浏览器支持 | ||||
---|---|---|---|---|---|
@font-face |
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
使用您需要的字体
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
实例
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
} div
{
font-family:myFirstFont;
}
</style>
使用粗体字体
您必须为粗体文本添加另一个包含描述符的 @font-face:
实例
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
文件 "Sansation_Bold.ttf" 是另一个字体文件,它包含了 Sansation 字体的粗体字符。
只要 font-family 为 "myFirstFont" 的文本需要显示为粗体,浏览器就会使用该字体。
通过这种方式,我们可以为相同的字体设置许多 @font-face 规则。
CSS3 字体描述符
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符:
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
@font-face文件
而由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类:TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。
TrueType
Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
EOT– Embedded Open Type (.eot)
EOT是嵌入式字体,是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染,存储在临时安装文件夹下。
OpenType(.otf)
OpenType是微软和Adobe共同开发的字体,微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
WOFF–WebOpen Font Format (.woff)
WOFF(Web开发字体格式)是一种专门为了Web而设计的字体格式标准,实际上是对于TrueType/OpenType等字体格式的封装,每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输。
SVG(Scalable Vector Graphics) Fonts (.svg)
SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体,还有一种gzip压缩格式的SVG字体。
@font-face文件转换生成
.eot、.woff、.svg每种格式的文件都可以用专门的工具转换得到,同时也有专门的用于生成@font-face文件的网站,可以将字体文件上传到网站上,转换后下载,然后就可以嵌入到网页上使用了。
这里推荐几个@font-face文件转换网站:
freefontconverter
font2web
中文@font-face
上面的这些@font-face转换网站都不支持中文字体的转换,中文字体文件相对于英文显得过于庞大,很长一段时间都被认为是不适合嵌入网页的。
直到几年前,这个问题终于被一个日本网站解决了,他用的技术就是截取法,在前端置入一个js脚本,脚本自动根据网页内容适时生成一个小字库(只包含当前网页内容的小字库)然后自动转换成.ttf、.eot、.woff、.svg等格式嵌入网页中,从页实现@font-face效果。体验和英文@font-face差不多,效果非常漂亮。但日文@font-face网站对于中文网页还无法支持。
如果是你想在你的网页上使用中文简体@font-face服务,也不是不可能,推荐一个中文@font-face网站——“有字库”。
使用时,只需要引用一段js脚本代码或者一段css代码,网站就会自动帮你截取网页需要的小字库并生成.ttf、.eot、.woff、.svg等格式文件,你可以将各文件下载下来,也可以托管在这个网站上,非常方便。去试试吧
CSS3 字体的更多相关文章
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- 收集的可以下载css3字体图标的网站
http://icomoon.io/app/ 可以选择跟简单调整图标打包成css3 字体下载, http://www.flaticon.com/categories/weapons
- css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...
- CSS3字体模块
介绍 字体提供了包含字符的视觉表现的资源.在最简单的等级中,其包含由字符编码到表示这些字符的形状(被称为字形)的映射信息.根据一组标准字体属性被分入一个字体家族的字体共享一个通用设计风格.在一个家族中 ...
- 绝对干货!!css3字体图标—丰富的阿里图标库iconfont的使用详解
在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...
- CSS3字体大小rem属性用法
PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较精确和固定. 只要页面某元素设置了px字体大小,其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素 ...
- CSS3字体图标
网址:http://icomoon.io/http://iconfont.cn/ 阿里巴巴字体库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- css3字体
1.定义个性化字体 @font-face{ font-family:字体名字; src:字体地址,可以多写几个用逗号隔开兼容浏览器 } div{ font-family:字体名字/*使用字体*/ } ...
- CSS3字体发光效果
text-shadow 该属性为文本添加阴影效果 text-shadow: h-shadow v-shadow blur color; h-shadow: 水平阴影的位置(阴影水平偏移量),可为负值, ...
随机推荐
- jquery ajax (1)原始js 实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HDU 1312:Red and Black(DFS搜索)
HDU 1312:Red and Black Time Limit:1000MS Memory Limit:30000KB 64bit IO Format:%I64d & ...
- jquery-object.js
/** * jQuery.query - Query String Modification and Creation for jQuery * Written by Blair Mitchelmor ...
- 《30天自制操作系统》读书笔记(2)hello, world
让系统跑起来 要写一个操作系统,我们首先要有一个储存系统的介质,原版书似乎是06年出版的,可惜那时候没有电脑,没想到作者用的还是软盘,现在的电脑谁有软驱?不得已我使用一张128M的SD卡来代替,而事实 ...
- [Android] hid设备按键流程简述
hexdump /dev/hidraw0就能看到usbhid设备传输过来的裸流 如:按下Input键 003ae60 0000 0096 8000 006b 0000 0000 0000 0000 * ...
- 如何通过HOOK改变windows的API函数(找到函数的相对偏移)
我们知道,系统函数都是以DLL封装起来的,应用程序应用到系统函数时,应首先把该DLL加载到当前的进程空间中,调用的系统函数的入口地址,可以通过GetProcAddress函数进行获取.当系统函数进行调 ...
- 学习Cassandra资料的一些整理
Cassandra note: 依赖:需要java 8 (http://www.oracle.com/technetwork/java/javase/downloads/index.html) 数据模 ...
- SQL Server中的STUFF函数的使用
STUFF ( character_expression , start , length ,character_expression ) 作用 删除指定长度的字符,并在指定的起点处插入另一组字符. ...
- Wad Manager的下载和运行
关于WAD版的软件 WAD版的软件分为两种: 独立安装版:程序完全安装在Wii的内置存储空间上,可以在Wii的主界面直接启动软件. Forwarder版:程序安装在Wii的内置存储空间上,同时在SD卡 ...
- 快速求幂(Quick Exponentiation)
接触ACM没几天,向各路大神求教,听说ACM主要是研究算法,所以便开始了苦逼的算法学习之路.话不多说,RT所示,学习快速求幂. 在头文件<math.h>或是<cmath>中,d ...