如何在网页中嵌入个性字体?
2013-12-21 15:34
330 查看
方案一、CSS:@font-face
这是CSS2中就已存在的一个属性(规则)。
语法:
说明:
IE中的用法:
方案二、利用Google Font API
此方案准确来说应该是对方案一的补充,因为实际上它还是使用@font-face来实现,只是url资源使用Google Font API库中的字体。
Google Font API调用起来非常方便,你可以用比较直接的方式:
或者你比较懒,就可以用这种方式:
这是CSS2中就已存在的一个属性(规则)。
语法:
font-face { font-family : name ; src : url ( url ) ; sRules }
说明:
1 2 3 4 5 6 | 设置嵌入HTML文档的字体。此规则无默认值。 此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据,可以用来提供 HTML文档使用该字体,或取代客户端系统已有的同名字体。此文件可以使用Microsoft WEFT工具制作。 到现在为止,已经有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了, 比较意外的是,IE系列浏览器也部分支持该属性。 |
@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; font-style: normal; } .fontFace{ font-family: MyHelvetica; }
IE中的用法:
@font-face| font-family: Goudy Stout; font-style: normal; font-weight: 400; src: url(GOUDYST0.eot); }
方案二、利用Google Font API
此方案准确来说应该是对方案一的补充,因为实际上它还是使用@font-face来实现,只是url资源使用Google Font API库中的字体。
Google Font API调用起来非常方便,你可以用比较直接的方式:
或者你比较懒,就可以用这种方式:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </link>
相关文章推荐
- 先序遍历和中序遍历求后序遍历
- mysql添加账号的数据库管理权限
- 【SVN命令】之 revert
- Summary of this week, Dec.21,2013
- 树莓派安装raspbmc
- wxWidgets:给窗口添加工具条
- Flash Builder编译的swf为什么在bin-debug下运行正常,复制到其他文件夹就不正常
- form与action之setter与getter
- 黑马程序员—访问修饰符与ArrayList集合
- libevent库的使用方法实例
- (转)从实现角度介绍如何线性时间建立后缀树
- CentOS 6.3开机自动挂载磁盘和文件夹
- ZOJ 3675 Trim the Nails(bfs+状态压缩搜索)
- 理想随机数发生器【解】--英雄会
- argc argv
- SSS小记
- Linux常用命令大全(CentOS,Ret Hat等等)
- maven使用记录
- libevent库的使用--定时器的使用实例
- 常用