up
down
Close
架站盒子
Web Development Box
 

CSS 字型檔案嵌入網頁的方法

│ 1915 Views │ CSS
CSS 字型檔案嵌入網頁的方法
CSS 字型檔案嵌入網頁的方法
  1. 嵌入外部字型
  2. 總結

嵌入外部字型

嵌入外部字型如果使用的是字型檔案,要留意檔案格式,現在的字型檔案主要有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檔。

 

延伸閱讀

本文是否對您有幫助?