对于一个出色的网页,字体的选择是相对关键的,无奈设计师必须考虑用户的本地端是否有相应的字体,因此设计常常只能使用一些较为大众化的常见字体,而舍弃更加适合的字体。在 CSS3 中,这一情况将可以改变。CSS3 中引入了 font-face(嵌入字体类型),实验 font-face 可以把需要的字体上传到自己的服务器,再在服务器的网页中使用该字体并显示出来,无论浏览网页的用户的本地端是否有该字体。
语法:
取值:
name : 字体名称。任何可能的 font-family 属性的值
url ( url ) : 使用绝对或相对 url 地址指定OpenType字体文件
sRules : 样式表定义
说明:
设置嵌入HTML文档的字体。此规则无默认值。
此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据,可以用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。
示例:
例如下面的效果:
使用 @font-face 定义字体所需要的文件,为了兼容各个浏览器,需要使用多种不同的字体格式,建议至少要有 .eot 和 .ttf 两种格式,.eot 用于 IE5+ ,.ttf 用于 Chrome 等现代浏览器,另外 .otf 也是不错的选择,也可以用于现代浏览器。
需要注意以下几点:
1.IE8及更早浏览器只支持微软自有的 .eot 格式
2.IE9.0-10.0部分支持 ttf 和 otf 字体格式
3.现代浏览器大多支持 .ttf 和 .otf 两种格式
4.现代浏览器需要从外部引用 @face-font 才能有效,IE 则可以直接在页面中使用 @face-font
"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用...
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具...
1.以笑拭泪,才是你离开时,我最悲伤的表情。 2.一辈子,有多少真心话,是以玩...
一、Flex 布局简介 Flex 是 Flexible Box 的缩写,意为弹性布局,用来为盒状模型...
我们要绘制一张图片,内容包括一张背景图和一个动态生成的二维码,前提是背景图...
前言 相信在移动端开发的过程中大家都会发现,移动端的显示一般与桌面端的不一样...
如何申请 SSL证书 ? SSL 证书是由合法的国际CA机构颁发,用户购买SSL证书要到合...
首先我们先看出现外边距塌陷的三种情况: 1.当上下相邻的两个块级元素相遇,上面...
为贯彻落实《网络安全法》及《车联网(智能网联汽车)产业发展行动计划》要求,...
作者:Ahmad shaded 译者:前端小智 来源:sitepoint 点赞再看,养成习惯 本文 G...