在網站中嵌入字型(Embedding)特殊應用

※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

下面這些字體,就算你的電腦沒有安裝也一樣看得到喔! 因為此網頁已經使用嵌入字型(Embedding)的功能囉!

注意!雖本文內容仍然有效。但,主要內容尚未更新成最嚴謹的新寫法。請務必參考頁尾「その他」的紅色提示連結!

火狐已知特殊問題:除了 Firefox4.0 外其他版本,在跨網域時都會無法正確顯示。都要特過特殊的伺服器設定,詳情請參考:Firefox @font-face Cross Domain Problem

數碼寶貝世界文字字體
あいうえお はひふへほ がぎぐげご ー

簡譜字體(01SMN)
asdf zxcv ASDF ZXCV


簡譜字體(1231-SMN)

!eiritiyiuiP:$|(對不起 我亂打XDDDD)


使用方法

CSS 設定

<html>
<head>
<style type="text/css"> 
/* 字體載入設定(此設定會讓瀏覽者的瀏覽器自動下載該字體) */
@font-face {
    font-family: "自訂的字體名稱(任意輸入)";
    src: url("http://xxx/字體檔案.ttf"); /* TTF file for CSS3 browsers */
}
@font-face {
    font-family: "自訂的字體名稱(任意輸入)";
    src: url("http://xxx/字體檔案.eot"); /* EOT file for IE */
}


/* 字體定義 */
.另一個自訂字型名稱 {
    font-family: "自訂的字體名稱(任意輸入)";
}

</style> 
</head> 
</html>

字體使用

<html>
<body>
<span class="另一個自訂字型名稱">要被變化的內容文字</span>
</body>
</html>

  • 使用這種寫法嵌入 TTF 格式的字體,只在支援 CSS3 的瀏覽器下有效果。
    目前主流的瀏覽器包含 Firefox、Chrome、Safria、Opera 等瀏覽器都有支援。


  • IE 的部份則支援另一種字體格式「EOT」,連老舊的 IE6 都能完全支援。
    這種格式可透過各種轉換方法,從 TTF 轉成 EOT 來使用。(詳細可參考下方內文「TTF 轉換成 EOT 字體格式」)


實際應用

CSS 設定

<html>
<head>
<style type="text/css"> 
/* 數碼寶貝世界文字字體載入設定 */
@font-face {
    font-family: "DIGIMON FONT";
    src: url("digimon.ttf"); /* TTF file for CSS3 browsers */
}
@font-face {
    font-family: "DIGIMON FONT";
    src: url("digimon.eot"); /* EOT file for IE */
}
 
/* 簡譜字體(01SMN)載入設定 */
@font-face {
 font-family: "jianpu_font";
 src: url("01SMN.ttf"); /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: "jianpu_font";
 src: url("01SMN.eot"); /* EOT file for IE */
}

/* 簡譜字體(1231-SMN)載入設定 */
@font-face {
 font-family: "JIANPU_FONT_1231-SMN";
 src: url("1231-SMN.ttf"); /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: "JIANPU_FONT_1231-SMN";
 src: url("1231-SMN.eot"); /* EOT file for IE */
}


/* 數碼寶貝世界文字字體定義 */
.digimon_font {
    font-family: "DIGIMON FONT";
    /*font-size: 52px;*/
}

/* 簡譜字體(01SMN)定義 */
.jianpu_font {
    font-family: "jianpu_font";
    /*font-size: 52px;*/
}

/* 簡譜字體(1231-SMN)定義 */
.jianpu_font_1231-SMN {
    font-family: "JIANPU_FONT_1231-SMN";
    /*font-size: 52px;*/
}
</style> 
</head> 
</html>

字體使用

<html>
<body>
數碼寶貝世界文字字體<br />
<span class="digimon_font">あいうえお はひふへほ がぎぐげご ー</span><br />
<br>
簡譜字體(01SMN)<br />
<span class="jianpu_font">asdf zxcv ASDF ZXCV</span><br />
簡譜字體(1231-SMN)<br />
<span class="jianpu_font_1231-SMN">!eiritiyiuiP:$|</span><br />
</body>
</html>

使用效果

數碼寶貝世界文字字體
あいうえお はひふへほ がぎぐげご ー

簡譜字體(01SMN)
asdf zxcv ASDF ZXCV


簡譜字體(1231-SMN)

!eiritiyiuiP:$|


特殊應用目標


請特別注意

  • 這種內嵌字體的方式在瀏覽器運作時,是屬於字體檔案完整下載的。
    因此不適合嵌入字體檔案較大的檔案(如:中文字體),否則會讓網頁瀏覽速度變慢很多。
  • 以上三項特殊應用字體都很小,都不超過 500 KB。


For IE

  • IE 無法直接使用 TTF 檔案格式的字體,需要轉換成 EOT 字體檔案格式。
  • 目前有微軟官方的軟體,也有線上轉換的工具網站(ttf2eotttf2eot on the web!)可以使用。
  • 其他瀏覽器則不需要轉換,只有IE系列很麻煩要用 EOT 字體格式 囧


有關 TTF 轉換成 EOT 字體格式



使用上述任何一種方法,都可以達到轉換成 EOT 字體格式的目的。
從軟體安全的角度來看,個人比較推薦使用線上轉換;但從字體私密/版權性相關的檔案隱私角度來看,會比較推薦使用命令提示字元(Command line)的方式轉換。
微軟官方轉換則被我視為最後手段。一來程式下載連線速度不佳,程式取得不易。二來他的程式需要安裝,而且跟前兩者比起來佔用資源較多,不安定的風險(?)相對較高。


リンク


その他

@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 */
	}
  • 另外還有「src: local('☺')」寫法,用意不明(?)


2014 增加新的用法!!


相關條目


以下為 @wiki 平台服務的附加廣告