CSS3 字体
2016-01-23 00:00
417 查看
摘要: CSS3 字体
使用CSS3,网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。
您所选择的字体在新的CSS3版本有关于@font-face规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型)。
Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.
Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.
注意: Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
提示:URL请使用小写字母的字体,大写字母在IE中会产生意外的结果
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
该文件"Sansation_Bold.ttf"是另一种字体文件,包含Sansation字体的粗体字。
浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体。
这样你就可以有许多相同的字体@font-face的规则。
原文地址:http://www.phplearn.cn/css3/css3-fonts.html
CSS3 @font-face 规则
以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3,网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。
您所选择的字体在新的CSS3版本有关于@font-face规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
浏览器支持
Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型)。
Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.
Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.
注意: Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
使用您需要的字体
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。提示:URL请使用小写字母的字体,大写字母在IE中会产生意外的结果
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>
使用粗体文本
您必须添加另一个包含粗体文字的@font-face规则:@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }
该文件"Sansation_Bold.ttf"是另一种字体文件,包含Sansation字体的粗体字。
浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体。
这样你就可以有许多相同的字体@font-face的规则。
原文地址:http://www.phplearn.cn/css3/css3-fonts.html
相关文章推荐
- CSS3 2D 转换
- CSS3 3D 转换
- CSS3 过渡
- CSS3 动画
- innerHTML和nnerText造成的乱码现象 以及 background-image放入.css中失效
- 使用HTML 和CSS 开发商业站点
- CSS3中的pointer-events
- 我就是要用css实现
- CSS之盒模型
- koala编译scss文件时不支持中文字体的解决方案
- 【CSS 未完】牛客网试题总结1 ?
- css垂直居中
- css样式
- css3—实现3D特效
- 一个css和js结合的下拉菜单,支持主流浏览器
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- 通过css的before和after制作按钮的动画效果
- css3中outline切换动画效果
- css笔记——杂记
- OOCSS的概念和思路