042_CSS3字体
生活随笔
收集整理的這篇文章主要介紹了
042_CSS3字体
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 在CSS3之前, web設計師必須使用已在用戶計算機上安裝好的字體。
2. 通過CSS3, web設計師可以使用他們喜歡的任意字體。當您找到或購買到希望使用的字體時, 可將該字體文件存放到web服務器上, 它會在需要時被自動下載到用戶的計算機上。
3. 使用您需要的字體
3.1. 使用任意字體是在CSS3 @font-face規則中定義的。
3.2. 在新的@font-face規則中, 您必須首先定義字體的名稱(比如: myFirstFont), 然后指向該字體文件。
3.3. 如需為html元素使用字體, 請通過font-family屬性來引用字體的名稱(myFirstFont):
@font-face {font-family: myFirstFont;src: url('Sansation_Light.ttf'); } p {font-family: myFirstFont; }4. 使用粗體字體
4.1. 您必須為粗體文本添加另一個包含描述符的@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"是另一個字體文件, 它包含了Sansation字體的粗體字符。
4.3. 只要font-family為"myFirstFont"的文本需要顯示為粗體, 瀏覽器就會使用該字體。
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. 效果圖
總結
以上是生活随笔為你收集整理的042_CSS3字体的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 041_CSS3文本效果
- 下一篇： 043_CSS32D转换