欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

css实现网页调用服务器端字体

shiping1 的头像

百度 "ttf 转" 就可以了

freefontconverter
font2web



ttf 转换成.eot的网站
http://ttf2eot.sebastiankippe.com/
css实现网页调用服务器端字体

分类: 字型 961人阅读 评论(0) 收藏 举报

转自:http://blog.csnowy.com/?post=9

 

使用@font-face调用服务器端字体的代码,我们先来看看css2手册中是怎么定义的:
以下是代码片段:[www.xlnv.net]
语法: 

@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); } 




Web 设计中有几种字体是比较安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般来说宋体是唯一安全的 - 译者),现在,使用 CSS2 的 @font-face 可以自己指定字体,不过因为牵扯到版权问题,实际能用的字体也是有限的 (另外,体积庞大的中文字体也是一个不好解决的问题 - 译者)。


以下是代码片段:[www.xlnv.net]
  语法如下: 
  @font-face { 
  font-family:’Anivers’; 
  src: url(’/images/Anivers.otf’) format(’opentype’); 
  }


  
  支持的浏览器: Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折,如果你不怕麻烦,可以在 IE 实现这个功能,请参考: make font-face work in IE ) 


  上面提到的这些功能已经可以在部分浏览器中使用了,尤其是 Safari。不幸的是,Safari 并非主流浏览器。

  Firefox 目前拥有大量用户基础,另外,即将推出的 Firefox 3.1 支持不少 CSS3 效果,因为 Firefox 用户的升级积极性很高,因此,会有不少用户可以提前体验 CSS3 的新功能。

  Google Chrome 今年刚刚发布,它基于 Webkit 引擎,因此和 Safari 很相似,因为 Safari 主要用于 Mac 市场,Chrome 可以正好弥补 Windows 市场的空缺。

  url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含可以 转换为 TrueType 字体的压缩字体数据,可以用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。此文件可以使 用 Microsoft WEFT 工具制作。

来自 http://blog.csdn.net/anbo724/article/details/6400307

通过css实现网页调用服务器端字体

  使用@font-face调用服务器端字体的代码,我们先来看看css2手册中是怎么定义的:

  以下是代码片段:

  语法:

  @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.seo0769.com/font.eot); }

  Web 设计中有几种字体是比较安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans ,宋体,黑体等(中文的,一般来说宋体是唯一安全的 ),现在,使用 CSS2 的 @font-face 可以自己指定字体,不过因为牵扯到版权问题,实际能用的字体也是有限的 (另外,体积庞大的中文字体也是一个不好解决的问题)。

 

  兼容性的情况,Chrome、Firefox、Opera均没有问题,IE系列不支持 .ttf 和 .otf。兼容IE需要 .eot 或者 .woff 的字体格式。

  使用 font-face 有不需要本地字库支持就能够保持字体样式一致,而不必使用图片代替的优势,缺点就是有可能会消耗加载的时间。

  那么为了更好的使用font-face,我们需要做的就是提高字体的加载及响应时间。

  对于字体的Format,主要有以下几种字体:

  1、TrueType(.ttf)格式。

  .ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式。

  2、OpenType(.otf)格式。

  .otf字体被认为是一种原始的字体格式,其内置在TrueType的基础上,提供了更多的功能。

  3、Web Open Font Format(.woff)格式。

  .woff字体是Web字体中最佳格式,是一个TrueType的压缩版本,同时也支持原数据包的分离。

  4、Embedded Open Type(.eot)格式。

  .eot字体是IE专用字体,可以从TrueType创建此格式字体。

  5、SVG(.svg)格式。

  .svg字体是基于SVG字体渲染的一种格式。

附:TTF转换为EOT的网址:http://ttf2eot.sebastiankippe.com/

来自 http://www.seo0769.com/post/154.html

 

使用@font-face调用服务器端字体的代码

@font-face { font-family : name ; src : url( url ) ; sRules } 

 

示例: 

@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }


来自 http://www.ruanko.com/questionRes/307520/68475d79a7f411e3a8a900163e021d16

 


CSS调用远程字体

CSS中的@font-face方法可以调用服务器端的字体。
Demo 可以参考:http://idv3.sinaapp.com 中标题字体的用法,具体用法如下:
 
@font-face { 
     font-family:name; 
     src: local('Ubuntu'), url(url) format('woff');
     sRules
}
 
兼容性的情况,Chrome、Firefox、Opera均没有问题,IE系列不支持 .ttf 和 .otf。兼容IE需要 .eot 或者 .woff 的字体格式。
 
看了[参考资料1]的文章,使用 font-face 有不需要本地字库支持就能够保持字体样式一致,而不必使用图片代替的优势,缺点就是有可能会消耗加载的时间。
 
那么为了更好的使用font-face,我们需要做的就是提高字体的加载及响应时间。
 
对于字体的Format,主要有以下几种字体:
 
1、TrueType(.ttf)格式。
.ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式。
 
2、OpenType(.otf)格式。
.otf字体被认为是一种原始的字体格式,其内置在TrueType的基础上,提供了更多的功能。
 
3、Web Open Font Format(.woff)格式。
.woff字体是Web字体中最佳格式,是一个TrueType的压缩版本,同时也支持原数据包的分离。
 
4、Embedded Open Type(.eot)格式。
.eot字体是IE专用字体,可以从TrueType创建此格式字体。
 
5、SVG(.svg)格式。
.svg字体是基于SVG字体渲染的一种格式。
 
参考资料:
普通分类: