PhoneGap中文网

 找回密码
 立即注册
查看: 20836|回复: 3

css3 使用本地字体,再也不要担心浏览器不支持字体了

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
发表于 2013-7-19 19:52:42 | 显示全部楼层 |阅读模式
通过 CSS3,Web 设计师再也不必被迫使用“web-safe”字体了。

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3,web 设计师可以使用他们喜欢的任意字体。

当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

使用您需要的字体

在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
简单实例
  1. <style>
  2. @font-face
  3. {
  4. font-family: myFirstFont;
  5. src: url('Sansation_Light.ttf'),
  6.      url('Sansation_Light.eot'); /* IE9+ */
  7. }

  8. div
  9. {
  10. font-family:myFirstFont;
  11. }
  12. </style>
复制代码
完整示例:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. @font-face
  6. {
  7. font-family: myFirstFont;
  8. src: url('/example/css3/Sansation_Light.ttf')
  9.     ,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
  10. }

  11. div
  12. {
  13. font-family:myFirstFont;
  14. }
  15. </style>
  16. </head>
  17. <body>

  18. <div>
  19. With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
  20. </div>

  21. <p><b>注释:</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p>

  22. </body>
  23. </html>
复制代码
it营
回复

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
发表于 2013-9-27 15:56:44 | 显示全部楼层
不知该说些什么。。。。。。就是谢谢
it营
回复 支持 反对

使用道具 举报

0

主题

108

帖子

116

积分

注册会员

Rank: 2

积分
116
发表于 2013-9-28 19:56:40 | 显示全部楼层
路过,支持一下啦
回复 支持 反对

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
发表于 2013-9-30 06:52:59 | 显示全部楼层
学习了,谢谢分享、、、
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-29 19:17 , Processed in 0.043248 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表