もうそう無界
もうそう無界

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

下面這些字體，就算你的電腦沒有安裝也一樣看得到喔！　因為此網頁已經使用嵌入字型（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 字體檔案格式。
  • 目前有微軟官方的軟體，也有線上轉換的工具網站（ttf2eot、ttf2eot 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 平台服務的附加廣告

タグ：

CSS
「在網站中嵌入字型(Embedding)特殊應用」をウィキ内検索
最終更新：2014年06月09日 05:05