• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> css >> CSS加载外部字体的方法_CSS载入本地没有的字体

CSS加载外部字体的方法_CSS载入本地没有的字体

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2011-01-15
• 　　平时我们做网站CSS的都知道，用户浏览网站时，网页上的字体是加载本地电脑里的。如果网站使用了用户电脑所没有安装的字体，那显示字体就会被系统默认的字体所代替了，自然显示效果也就大不如前了，这个问题如何解决呢，成都网站建设通过多方面了解。
  　　这个问题，其实还是有解决办法的。那就是，准备一个或几个字体文件，放置到网站空间服务器上，再用 CSS 的加载方法把字体加载到网页中，这样，即使用户电脑中没有某一种字体，也可以正常显示！
  　　以微软雅黑为例，一般来说，现在的 win7 系统都自带了这种字体，但 winXP 却没有。如果网站中运用了雅黑字体win7 系统的用户访问能够正常显示，但 winXP 系统的用户访问，就不能显示，应该是用默认的宋体代替了。
  加载字体文件的 CSS 方法，看这段代码：
  body {font-family:’微软雅黑’}
  @font-face {
  font-family:微软雅黑;
  src: url(‘微软雅黑.eot’); /* IE9 Compat Modes */
  src: url(‘微软雅黑.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
    url(‘微软雅黑.woff’) format(‘woff’), /* Modern Browsers */
    url(‘微软雅黑.ttf’)  format(‘truetype’), /* Safari, Android, iOS */
    url(‘微软雅黑.svg#微软雅黑’) format(‘svg’); /* Legacy iOS */
  }
  系统字体的格式是ttf的，凡是以IE为内核的浏览器都不支持加载外部 .ttf 格式的字体！那怎么办啊？
  把ttf转换成eot网址：http://ttf2eot.sebastiankippe.com/
  好了，现在就来测试一下吧：
  @font-face
  语法：
  @font-face { font-family : name ; src : url( url ) ; sRules }
  说明：
  name : 字体名称
  url : 　使用绝对或相对地址指定OpenType字体
  sRules : 样式表定义
  设置嵌入HTML文档的字体。
  　　嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。
  示例：
  @font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }
  　　现在，虽然是成功解决了各主流浏览器加载外部字体的问题，但也只是成功了一小半，因为我们要清楚地看到问题的本质，即后续需要测试网站加载速度的问题，两个字体文件加起来快有30M 了，加载速度的问题亟待测试与解决！
• 网站建设采用CSS网页布局的优势 :上一篇
  前端开发和网页制作有什么区别？ :下一篇