042_CSS3字体
1. 在CSS3之前, web設(shè)計(jì)師必須使用已在用戶(hù)計(jì)算機(jī)上安裝好的字體。
2. 通過(guò)CSS3, web設(shè)計(jì)師可以使用他們喜歡的任意字體。當(dāng)您找到或購(gòu)買(mǎi)到希望使用的字體時(shí), 可將該字體文件存放到web服務(wù)器上, 它會(huì)在需要時(shí)被自動(dòng)下載到用戶(hù)的計(jì)算機(jī)上。
3. 使用您需要的字體
3.1. 使用任意字體是在CSS3 @font-face規(guī)則中定義的。
3.2. 在新的@font-face規(guī)則中, 您必須首先定義字體的名稱(chēng)(比如: myFirstFont), 然后指向該字體文件。
3.3. 如需為html元素使用字體, 請(qǐng)通過(guò)font-family屬性來(lái)引用字體的名稱(chēng)(myFirstFont):
@font-face {font-family: myFirstFont;src: url('Sansation_Light.ttf'); } p {font-family: myFirstFont; }4. 使用粗體字體
4.1. 您必須為粗體文本添加另一個(gè)包含描述符的@font-face:
@font-face {font-family: myFirstFont;src: url('Sansation_Bold.ttf');font-weight: bold; } span {font-family: myFirstFont;font-weight: bold; }4.2. 文件"Sansation_Bold.ttf"是另一個(gè)字體文件, 它包含了Sansation字體的粗體字符。
4.3. 只要font-family為"myFirstFont"的文本需要顯示為粗體, 瀏覽器就會(huì)使用該字體。
5. CSS3字體描述符
6. 例子
6.1. 代碼
<!DOCTYPE html><html><head><title>CSS3 字體</title><meta charset="utf-8" /><style type="text/css">@font-face {font-family: myFirstFont;src: url('Sansation_Light.ttf'); }@font-face {font-family: myFirstFont;src: url('Sansation_Bold.ttf');font-weight: bold;}p {font-family: myFirstFont;}span {font-family: myFirstFont;font-weight: bold;}</style></head><body><p>CSS3 使用font-face自定義字體。</p><span>CSS3 使用font-face自定義粗體字體。</span></body> </html>6.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的042_CSS3字体的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 041_CSS3文本效果
- 下一篇: 043_CSS32D转换