CSS字體

時間 2019-11-26

標籤 css 字體欄目 CSS 简体版

原文原文鏈接

字體系列

【1】5種通用字體系列：擁有類似外觀的字體系列css

　　serif字體:字體成比例，且有上下短線(襯線字體)，包括Times\Georgia\New century Schoolbookhtml

　　sans-serif字體:字體成比例，且沒有上下短線(無襯線字體)，包括Helvetica\Geneva\Verdana\Arial\Universandroid

　　Monospace字體:字體不成比例，等寬字體，包括Courier\Courier New\Andale Monoios

　　Cursive字體:手寫體，包括Zapf Chancery\Author\Comic Sansweb

　　Fantasy字體:沒法歸類的字體，包括Western\Woodblock\Klingonchrome

【2】特定字體系列：具體的字體系列瀏覽器

font-family:"宋體";
font-family:"arial";

【3】默認字體系列svg

　　chrome/opera:"宋體"字體

　　firefox:"微軟雅黑"網站

　　safari/IE:Times,"宋體"

font-family:字體系列1,字體系列2 ……
//【注意】若瀏覽器識別第一個字體，則以第一個字體顯示；若是不識別，則嘗試下一個。    
font-family: arial，「宋體」,「微軟雅黑」;
//【注意】若寫英文字體，必定要把英文字體寫在前面，英文字體會影響到英文、數字和標點符號。
font-family: Times, 'New Century Schoolbook','New York', serif;
//【注意】若字體名中有一個或多個空格，要添加引號

【4】中文字體

　　對於中文字體來講，常見的是宋體和微軟雅黑。宋體是襯線字體，而微軟雅黑是無襯線字體。襯線字體經常使用於排版印刷，而無襯線字體則經常使用於網頁中

　　通常地，一行中有30-40個文字時，行高爲1.5時，有較好的閱讀體驗。對於標題來講，更好的樣式是取消其加粗設置，並改變其顏色，增長頁面的層次感

字體加粗

【1】經常使用值

font-weight: normal(正常，默認)
font-weight: bold(加粗)

【2】全部值

　　normal(正常)/bold(粗體)/bolder(更粗)/lighter(更細)

　　100/200/300/400/500/600/700/800/900 (100爲最細，900爲最粗)

字體大小

【1】絕對字體大小

　　xx-small/x-small/small/medium/large/x-large/xx-large

【2】相對字體大小

　　smaller/larger

【3】em/%

　　1em = 100%

【4】默認字體大小

　　chrome/firefox/opera/IE/safari:16px

【5】最小字體大小

　　chrome:12px

　　opera:9px

　　safari/IE/firefox:無

font-size

　　font-size字體大小設置的是字體中字符em框的高度，實際的字符字形一般比字符em框要矮，與字體類型有關

　　初始值: medium

　　應用於: 全部元素

　　繼承性: 有

　　百分數: 相對於父元素的字體大小font-size

字體風格

font-style: normal(默認)
font-style: italic(斜體)
font-style: oblique(傾斜)

字體變形

font-variant:normal(默認)
font-variant:small-caps(小型大寫字母)

行高

line-height: normal(默認)
line-height: 具體值

　　關於行高的詳細信息移步至此

字體

　　font: [[<font-style> || <font-variant> || <font-weight>]? <font-size>[/<line-height>?<font-family>]

　　　　[注意]對於font-size，百分數相對於父元素來計算；對於line-height，百分數相對於元素的font-size來計算

關鍵字

　　CSS標準定義了6個系統字體關鍵字：

　　caption: 由標題控件使用的字體樣式，如按鈕和下拉控件

　　icon: 系統圖標所用的字體樣式，如文件夾和文件圖標

　　menu: 下拉菜單和菜單列表中文本使用的字體樣式

　　message-box: 對話框中文本使用的字體樣式

　　small-caption: 由標題小控件的標籤使用的字體樣式

　　status-bar: 窗口狀態條中文本使用的字體樣式

font-face

@font-face {
    font-family: 自定義名稱;
    src: url(../font/test.eot);
    src: url(../font/test.eot?#iefix) format("embedded-opentype"),
         url(../font/test.woff) format("woff"), 
         url(../font/test.ttf) format("truetype"),
         url(../font/test.svg#jq) format("svg");
}
//EOT:IE專用；WOFF:標準；TTF:最多見(safari/android/ios)；SVG:圖形格式(IE和firefox不支持)

兩種調用字體的方法

　　【1】html(&#x + 小圖標對應的unicode編碼)

div{
    font-family: 自定義名稱;
    -webkit-font-smoothing:antialiased;//字體抗鋸齒、光滑度屬性
    -mox-osx-font-smoothing: grayscale;//字體抗鋸齒、光滑度屬性
}
<div>&#xf048</div>

　　【2】css(\ + 小圖標對應的unicode編碼)(不兼容IE7-瀏覽器)

div{
    font-family: 自定義名稱;
    -webkit-font-smoothing:antialiased;//字體抗鋸齒、光滑度屬性
    -mox-osx-font-smoothing: grayscale;//字體抗鋸齒、光滑度屬性
}
div:before{
    content: "\f048";
}
<div></div>

【實例】

　　下面以一個實例來講明如何使用字體圖標，最終的效果以下

　　通常地，使用國內的iconfont網站來尋找須要的字體圖標，如晴、陰、雨、雪圖標，將其新建爲一個項目，並將項目文件下載到本地。下載的文件中包含了須要的字體文件及使用範例

　　最終代碼以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
@font-face {
  font-family: 'iconfont';  
  src: url('font/iconfont.eot');
  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('font/iconfont.woff') format('woff'),
  url('font/iconfont.ttf') format('truetype'),
  url('font/iconfont.svg#iconfont') format('svg');
}
.weatherBox input{
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
.weatherBox label{
    font-family: 'iconfont';
    -webkit-font-smoothing:antialiased;//字體抗鋸齒、光滑度屬性
    -mox-osx-font-smoothing: grayscale;//字體抗鋸齒、光滑度屬性
}
.weatherBox label + label{
    margin-left:10px;
}
.weatherBox label:hover{
    color: lightblue;
}
.icon-sunny:before { content: "\e601"; }
.icon-snowy:before { content: "\e603"; }
.icon-cloudy:before { content: "\e605"; }
.icon-rainy:before { content: "\e606"; }
</style>    
</head>
<body>
<div class="weatherBox">
    <label class="icon-sunny">
        <input type="radio" name="weather" id="sunny">晴
    </label>
    <label  class="icon-cloudy">
        <input type="radio" name="weather" id="cloudy">陰
    </label>
    <label  class="icon-rainy">
        <input type="radio" name="weather" id="rainy">雨
    </label>
    <label  class="icon-snowy">
        <input type="radio" name="weather" id="snowy">雪
    </label>    
</div>    
</body>
</html>

1. CSS——web字體與CSS字體圖標
2. CSS Fonts（字體）
3. css字體
4. css 字體
5. css - 字體
6. CSS字體
7. 【CSS3】CSS——字體
8. CSS--字體
9. css font-family css 字體 css 字體樣式
10. css 字體樣式
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。