如何在網頁設計中使用個性化字體

時間 2019-11-11

標籤如何網頁設計使用個性化字體简体版

原文原文鏈接

一個經常令設計師和前端開發人員都頭疼的事情就是字體的使用，設計師經常在設計稿中使用某些很漂亮的字體，以實現比較酷炫的界面。但這樣經常給編碼人員形成一些難度，若是在頁面中放棄使用這些字體，設計師會感到鬱悶，而若是使用這些字體的話，就要切圖並使用不少額外的樣式——又一個魚和熊掌的抉擇。還好，如今已經有了一些相關的替代技術了。javascript

1. @font-face

CSS3的@font-face屬性（事實上CSS2中就已引入），爲咱們帶來了一些但願，而Firefox 3.5新增的對@font-face的支持，讓咱們離這個但願更進了一些。css

到如今爲止，已經有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了，比較意外的是，IE系列瀏覽器也部分支持該屬性。Mozilla旗下的其它產品，SeaMonkey 2 和Thunderbird 3 也支持該屬性。html

瀏覽器兼容性

瀏覽器	最低版本	支持字體
Internet Explorer	4.0	只支持OpenType字體(eof格式)
Firefox (Gecko)	3.5(1.9.1)	TrueType(ttf格式)和OpenType 字體
Opera	10.0	TrueType和OpenType 字體
Safari (WebKit)	3.1 (525)	TrueType和OpenType 字體

從表中能夠看出，IE系瀏覽器不支持TTF格式的字體，只支持eof格式，不過，微軟官方發佈了一個WEFT工具，能夠將TTF轉化爲EOF，須要的朋友能夠去下載使用。前端

可使用的樣式以下：java

@font-face {font-family: qianduanNet;font-style:normal;font-weight:400;
	src:url("SketchRockwell.ttf");}
.fontFace{font-family: qianduanNet;font-size:3.2em;letter-spacing:1px;text-align:center;}

IE中的樣式以下：css3

@font-face {font-family: Goudy Stout;font-style:normal;font-weight:400;
    src:url(GOUDYST0.eot);}

這是目前最簡單實現嵌入字體的方法。git

@font-face資源：

sIFR

sIFR並不是一種新技術，而是已經存在並被使用不少年了。sIFR是一種頗有用也很好用的文本替換技術，經過Flash+JS+CSS將網絡字體嵌入到頁面中。github

考慮到網上已經有不少資源，本文就再也不贅述，想要了解的朋友能夠參考一下文章：web

Typeface.js

Typeface被認爲是替代SIFR的最佳方案，相對於sIFR，Typeface少了Flash的應用，使用純JS來嵌入相關字體，並且用法也很簡單：在頁面中引入相應的js文件就OK了。canvas

<html><head><!-- 加載全部的樣式先 --><linkrel="stylesheet"type="text/css" ref="/style.css"><!-- 再加載typeface.js 庫文件和typeface.js字體文件--><scripttype="text/javascript"src="typeface-0.10.js"></script><scripttype="text/javascript"src="helvetiker_regular.typeface.js"></script></head><body><!-- 繼續並使用CSS指定typeface.js 字體 --><divclass="myclass typeface-js"style="font-family: Helvetiker">
      文本文本...
    </div></body></html>

從中咱們能夠看出來，使用Typeface只須要着簡單的幾步就能夠在頁面中使用嵌入字體了。

typeface資源：

cufon

cufon是一個比較新的技術，被定位爲有價值的sIFR替代方案，它有不少優點：

無需瀏覽器插件——被瀏覽器原生支持；
兼容性——兼容各個主流瀏覽器
易用—— 無需配置
速度—— 快速渲染大量字體

cufon的原理：

cufon經過生成器將字體文件轉化爲SVG字體，再將其轉換爲VML文件，這對IE很重要，由於IE原生支持VML文件。最後，使用複雜的JavaScript函數將VML文件編碼爲JSON文件（typeface的原理與此相似）。以下圖所示：

這樣作有不少好處：

與加載一個字體文件，你只須要加載一些js文件就能夠；
客戶端無需再次手工編碼；
外部js文件直到加載完成纔會被執行，這可讓咱們實現無閃爍的乾淨的替換。
壓縮率高。相對於字體文件，可壓縮掉60-80% 。

cufon的用法：

cufon的用法與typeface相似，須要加載一個庫文件和字體文件。而與typeface不一樣的是，你須要使用js初始化cufon：

<script type="text/javascript">
Cufón.replace('h2',{ fontFamily:'Qlassik Medium'});</script>

這與typeface的在樣式中定義字體很不同。

cufon資源：

cufon項目
cufon演示
cufon生成器
wp-cufon 一個使用cufon的wordpress插件

cufon和typeface.js對比：

	Cufón	Typeface.js
File size	14.0kb (壓縮後)	16.3kb (未壓縮)
支持的瀏覽器	Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome 和 Internet Explorer6+	Firefox 1.5+, Safari 2+, and Internet Explorer 6+, 最新版已經支持IE8
支持的字體類型	.ttf, .otf, PFB, postscript	.ttf
支持的字體樣式	font-size, font-style, font-weight, line-height, text-shadow, color	font-size, font-style, font-weight, font-stretch, letter-spacing, line-height
可選文字?	尚不支持	尚不支持

從這個對比中能夠看出來，二者並無太大的不一樣，cufon支持更多的瀏覽器和字體類型，而typeface支持更多的字體樣式。實際應用中貌似typeface方便一些，能夠直接在樣式中定義字體，而cufon則有整體文件大小方面的優點。具體用哪個，看你本身的喜愛吧。

總結

事實上，sIFR、typeface.js和cufon都是目前常說的文本替換技術，這些技術均可以用來替換@font-face，而且實現更好的瀏覽器兼容性。可是每種技術都不是完美的：

@font-face最簡單，雖然大部分瀏覽器也都支持了，可是其瀏覽器兼容性並非很完美，對IE還須要eof字體的特殊支持，並且對於中文字體來講，通常都很大，這會佔用很大的頁面加載時間和服務器流量。
sIFR是兼容性和可用性最好、對SEO友好的一種方案，但也是實現起來最複雜的，並且須要瀏覽器支持Flash插件。
typeface和cufon都是利用在IE中渲染VML，而在非IE瀏覽器中使用canvas的方式實現「僞」字體的，他們使用起來相對簡單，可是可用性和用戶體驗以及SEO都不是很理想。
版權問題是一個很重要的問題，不管你使用哪一種技術，都須要考慮文字的受權。

因此，使用哪一種方案，要看你的需求和喜愛，或許你寧願切更多的圖片也不肯使用這些技術？