Home » jQuery 外掛

[jQ]fontAvailable 1.1 jQuery Plugin

[ 日期： | 瀏覽：4,495 | 迴響：1 ]
範例 1
請協助我把這個效果加到我的網站 (只要 500 元)
沒錯!只要 500 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



有時設計者為了讓網頁看起來有特色，就會用上其它特殊的字型。但也不是每個瀏覽者都會安裝該字型，所以可能就會讓畫面有點不協調。

fontAvailable 是一個很有趣的外掛，它利用字型間的寬度差異性來判斷該字型是否有安裝。既然可以判斷是否有安裝就能針對沒安裝字型的來做設計囉。


套件名稱：fontAvailable
套件版本：1.1
作者網站：http://code.google.com/p/jquery-fontavailable/
套件網址：http://plugins.jquery.com/project/fontavailable
發佈日期：2009-04-30
檔案大小：1.04 KB
檔案下載：jquery.fontavailable-1.1.js

參數說明：

檢視原始碼 JavaScript
1
2
3

fontName(必填)
描述： 要判斷的字型名稱
預設值： 無

方法說明：

檢視原始碼 JavaScript
1
2

// 判斷瀏覽者的電腦是否有安裝特定的字型
$.fontAvailable(fontName);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fontavailable-1.1.js"></script>
<script type="text/javascript">
	$(function(){
		// 判斷瀏覽者的電腦是否有安裝微軟正黑體的字型
		if($.fontAvailable('微軟正黑體')){
			$('#msg1').css({
				'font-family': '微軟正黑體',
				'color': 'red'
			}).html('你的電腦有裝微軟正黑體字型。');
		}
 
		// 判斷瀏覽者的電腦是否有安裝DEATH FONT的字型
		if($.fontAvailable('DEATH FONT ver1.0')){
			$('#msg2').css({
				'font-family': '"DEATH FONT ver1.0"',
				'color': 'red'
			}).html('http://abgne.tw');
		}
	});
</script>
 
<body>
	<div id="msg1">你的電腦上並沒有安裝微軟正黑體字型。</div>
 
	<div id="msg2"><a href="DEATH FONT.TTF">請先下載安裝指定字型</a></div>
</body>

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

備註：
如果要判斷的字型名稱有空格或是其它特殊符號時，依 fontAvailable 的判斷方式可能在非 IE 瀏覽器中無法正常的判斷使用。因此筆者就稍微修改-jquery.fontavailable-1.1-fix.js 讓它能正常判斷。

1 筆針對 [jQ]fontAvailable 1.1 jQuery Plugin 的迴響

發表迴響