如果web項目中需要用到LCD液晶字型顯示數值(如下圖所示)該怎麼辦?
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICdzFWRoRXdvN1LclHdpZXYyd2LcBzNvwVZ2x2bzNXak9CX90TQNNkRrFlQKBTSvwFbslmZvwFMwQzLcVmepNHdu9mZvwFVywUNMZTY18CX052bm9CX1Z0RhZmVtJGcoJzY1Z1MjZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39TMxMDNxEDMxEzNxATM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
在這就需要用到@font-face(具體看一下文法)
/* 定義 */
@font-face {
font-family: 'MicrosoftYaHei';
src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */
url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
}
/* 使用 */
body{
font-family: "MicrosoftYaHei";
}
我們來看一下詳細文法規則
/* 定義字型 */
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
/*自定義字庫名稱(一般設定為所引入的字庫名),後續樣式規則中則通過該名稱來引用該字庫。*/
font-family: <YourWebFontName> :
/*設定字型的加載路徑和格式,通過逗号分隔多個加載路徑和格式*/
src :
/*字型的加載路徑,可以是絕對或相對URL。*/
srouce :
/*字型的格式,主要用于浏覽器識别,一般有以下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。*/
format :
/* font-weight 和 font-style 和之前使用的是一緻的。*/
font-weight:
font-style:
/*src屬性後還有一個 local(font name) 字段,表示從使用者系統中加載字型,失敗後才加載webfont。*/
src: local(font name), url("font_name.ttf")
說了這麼多,那如何獲得LCD字型呢?
到 dafont下載下傳.ttf格式字型,然後通過fontconverter或者fontsquirrel.com來生成.woff等格式的字型。
如圖找到所需字型,點選右邊的download下載下傳,下載下傳的是壓縮包,需解壓
将解壓後的.ttf檔案通過fontconverter工具轉換成.woff檔案格式,将轉換後的壓縮包解壓,解壓後的檔案都放到項目中,在.css檔案中引用該檔案位址,按上訴的文法寫即可
相容性問題
對于@font-face而言,相容性問題就是各浏覽器所能識别的字型格式不盡相同。
TrueType格式(.ttf)
Windows和Mac上常見的字型格式,是一種原始格式,是以它并沒有為網頁進行優化處理。
浏覽器支援:IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
OpenType格式(.otf)
以TrueType為基礎,也是一種原始格式,但提供更多的功能。
浏覽器支援:FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
Web Open Font格式(.woff)
針對網頁進行特殊優化,是以是Web字型中最佳格式,它是一個開放的TrueType/OpenType的壓縮版,同時支援中繼資料包的分離。
浏覽器支援:IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
Embedded Open Type格式(.eot)
IE專用字型格式,可以從TrueType格式建立此格式字型。
浏覽器支援:IE4+
SVG格式(.svg)
基于SVG字型渲染的格式。
浏覽器支援:Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+
為解決相容性問題,Paul Irish寫了稱為Bulletproof的一個獨特的@font-face文法:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
注意事項
- @font-face遵循先定義後使用原則;
- 由于中文字型太大,是以建議若中文LOGO還是使用圖檔。而英文LOGO則可使用@font-face代替圖檔;
- @font-face無效有可能是字型的加載路徑錯誤;
-
FireFox中@font-face的字型加載路徑使用相對路徑時,可能會失敗,具體原因和解決辦法如下:
a). 使用絕對路徑可解決問題;
b). 在file uri scheme的情況下(file:///),由于FireFox預設的file uri origin政策十分嚴格,不同路徑等級則無法通路。是以相對路徑被視為跨域操作,是以字庫加載失敗。可通過 about:config 進入浏覽器設定界面,然後将 security.fileuri.strict_origin_policy 設定為false即可;
c). 在http/https uri scheme的情況下(http:///或https:///),則需要對.eot、.ttf和.woff等字型檔案的響應頭中加入 Access-Control-Allow-Origin: * ,進而允許跨域請求。