CSS樣式中字體和大小


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM