1、css中引入外部字體文件:
@font-face 被列為了 CSS3 的一項新特性,其實它並不是什么新鮮技術,它最早出現在 CSS2 的規范定義中,但是在 CSS2.1 中又被刪除,現在被正式列入 CSS3。目前主流的瀏覽器(IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+)都能夠支持這個屬性,所以不用擔心會有瀏覽器兼容性問題。
@font-face 允許您在網頁中使用電腦中沒有安裝的字體,完全擺脫安全字體的限制。只需將字體包安裝在服務器上,當用戶加載網頁時,字體包會自動下載到用戶機器上,保證字體能夠正確渲染。
網頁設計師一定不會滿足於使用這些安全字體,如何才能使用漂亮的字體,並能在普通用戶的瀏覽器中被正確的渲染出來?答案是:使用@font-face
@font-face { font-family: "AncientWar"; src: url('style/css/fonts/AncientWar.ttf'); }
2、搞清楚PS中字體pt與px之間的關系以及轉化:
1)以下是我們常見的單位
px:pixel,像素,屏幕上顯示的最小單位,用於網頁設計,直觀方便;
pt:point,是一個標准的長度單位,1pt=1/72英寸,用於印刷業,非常簡單易用;
em:即%,在CSS中,1em=100%,是一個比率,結合CSS繼承關系使用,具有靈活性.
2)PX和PT轉換的公式:
pt=px乘以3/4。
比如12px×3/4=9pt大小。
PX和em轉換的公式:
對於PX轉em的方法也類似,就是em=16乘以px,也就是說1.5em=1.5×16=24px。
3、什么是安全字體(在網頁開發中,應該盡量使用安全字體,也就是高度通用的字體)
安全字體這個概念,也許很多人都不是很熟悉,我們先舉個例子:
font-family: Arial, Helvetica, sans-serif;
這個對字體(font-family)的定義就是一個安全字體。每種操作系統都有自己默認安裝的字體,瀏覽器只能正常顯示操作系統中安裝了的字體。而不同的操作系統默認安裝的字體不完全相同,有的甚至名稱都不一樣,在這種情況下,我們必須定義安全字體,使字體在所有的瀏覽器中都能夠正常顯示。
在上面這個 font-family 的定義中,我們選擇 Arial 作為首選字體(注:Arial 字體是最常用的 sans serif 字體,也是 Windows 的默認字體,當字體很小是不容易閱讀),但是,蘋果系統中沒有這個字體,所以我們選擇 Helvetica(和 Arial 很相似)作為第二備選字體,最后我們選擇 sans-serif 作為第三備選字體,如果在一個既沒有 Arial 也沒有 Helvetica 的系統里,那么瀏覽器會使用默認的 sans-serif 字體來渲染文字。這樣,我們很大程度上保證了使用不同操作系統的訪問者都能看到相同(至少是類似)的頁面文字。
除了 Arial,常見的安全字體還有:
- Verdana 字體,它是微軟公司的核心字體之一,專門為屏幕顯示而開發的。它的應用廣泛,寬度大而易於閱讀,是顯示器中最清晰的字體。CSS 寫法:font-family: Verdana, Geneva, sans-serif;
- Times New Roman 字體,它是最常用的 serif 字體,是瀏覽器默認的字體。小號字的易讀性也很差。CSS 寫法:font-family: 'Times New Roman', Times, serif;、
4、CSS字體名稱(CSS中的五大字體家族{font-family:serif,sans-serif,fantasy,cursive})
1)常用的一些字體
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei
微軟正黑體 Microsoft JhengHei
新宋體 NSimSun
新細明體 PMingLiU
細明體 MingLiU
標楷體 DFKai-SB
仿宋 FangSong
楷體 KaiTi
仿宋_GB2312 FangSong_GB2312
楷體_GB2312 KaiTi_GB2312
2)Windows的一些字體
新細明體:PMingLiU
細明體:MingLiU
標楷體:DFKai-SB
黑體:SimHei
新宋體:NSimSun
仿宋:FangSong
楷體:KaiTi
仿宋_GB2312:FangSong_GB2312
楷體_GB2312:KaiTi_GB2312
微軟正黑體:Microsoft JhengHei
微軟雅黑體:Microsoft YaHei
裝Office會生出來的一些:
隸書:LiSu
幼圓:YouYuan
華文細黑:STXihei
華文楷體:STKaiti
華文宋體:STSong
華文中宋:STZhongsong
華文仿宋:STFangsong
方正舒體:FZShuTi
方正姚體:FZYaoti
華文彩雲:STCaiyun
華文琥珀:STHupo
華文隸書:STLiti
華文行楷:STXingkai
華文新魏:STXinwei
3)英文字體
Arial
Helvetica
Tahoma
Verdana
Lucida Grande
Times New Roman
Georgia
PmingLiu
Impact
Book Antiqua
Century Gothic
Courier New
sans-serif