嵌入外部字型
嵌入外部字型如果使用的是字型檔案，要留意檔案格式，現在的字型檔案主要有3種格式，分別是.ttf、.otf跟.woff，其中.woff又有分.woff2。
| 字型 | 格式 | format( ) | 瀏覽器支援 |
|---|---|---|---|
| TrueType | ttf | "truetype" | no |
| OpenType | otf | --- | no |
| Web Open Font Format | woff/woff2 | "woff" | yes |
瀏覽器支援寫「no」是指現在大多的瀏覽器都不支援，但舊的瀏覽器可能支援，這裡就不詳述了，只是大部分下載的字型檔都是.ttf或.otf檔，因此建議轉為.woff或.woff2。
可到此網址進行轉檔：https://cloudconvert.com
接著在CSS中設置：
@font-face {
font-family: Barcelona;
src: url('/Barcelona.woff2') format('woff2');
}
接下來就可以在需要的class中設定字型了：
.myclass {
font-family: 'Barcelona';
}
有時候為了節省資源，可以讓已經有此字型的使用者先使用自己電腦中的字型檔，如果沒有才使用網站伺服器的字型檔，則在前面加上local() 。
@font-face {
font-family: Barcelona;
src: local("Barcelona") , url('/style_name.woff2') format('woff2');
}
總結
現在的瀏覽器大多無法讀取.ttf、.otf檔案，建議轉為.woff或.woff2檔。
本文是否對您有幫助？