网页自定义字体的几种兼容方案

Nov 02, 2011 / 评论(0) / 设计

使用Css3

注：仅支持CSS3 @font-face 属性的浏览器可用

@font-face { 
  font-family: "Custom Font Name"; 
  src: url('font.ttf'); 
}
body {
  font-family: "Custom Font Name";
}

由于不同浏览器支持的字体格式不一，故兼容方案：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

字体在线生成器： http://www.fontsquirrel.com/fontface/generator

使用Google Fonts

第一步： 载入Google 字体

<link href='http://fonts.googleapis.com/css?family=Tangerine|Pinyon+Script|Dancing+Script' rel='stylesheet' type='text/css'>

第二步： CSS 样式中设定字体

.page{ font-family: 'Tangerine', 'Pinyon Script', 'Dancing Script',Tahoma,Arial,Helvetica,sans-serif; }

使用Cufon方案

Step 1: 获取Cufon

进入 cufon.shoqolate.com/generate/ 右键 “ Download “ 选择[另存为] 保存 cufon-yui.js 到本地。

Step 2: 生成字体

从本地上传你所需要生成的字体文件，分别勾选 you are using a font that is legit to use ， check off the EULAs and the Terms of Agreement. 单击按钮 Let’s Do This 下载并保存所生成的字体文件到本地。

Step 3: 在页面中应用 Cufon

<script src="js/cufon-yui.js"></script>
<script src="js/Gigi_400.font.js"></script>

<script>  
  Cufon.replace('h3, p');
</script>

如果页面载入了 jQuery 类库，则可同时使用复合选择器。例如：

<script>
  Cufon.replace('h3#convert-me, p#convert-me-too');
</script>

当然，也可以为采用cufon 的字体添加自定义样式，详情参考： github.com/sorccu/cufon/wiki/Styling

sIFR

这是一套JS+Flash文本替换方案，由于Flash已经不被最新浏览器支持了，个人不推荐使用。已经过时！ update by 涉水 2017 11.15

Scalable Inman Flash Replacement (sIFR) is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents. It was initially developed by Mike Davidson and improved by Mark Wubben. It is a scalable variety of HTML text-to-flash replacement pioneered by Shaun Inman.

来源：维基百科
中文资料稍后补上，请先参考官方主页： http://www.mikeindustries.com/blog/sifr/

sIFR 文档： http://wiki.novemberborn.net/sifr/

附录：参考文章

评论已关闭。Comments are turned off for this article.

依然少年.

摘要

目录