css - 字體

時間  2021-08-14
標籤 javascript css html java web 瀏覽器 服務器 markdown svg 函數 欄目 CSS 简体版
原文   原文鏈接

這是我參與更文挑戰的第15天，活動詳情查看： 更文挑戰javascript

工做比較忙，爲了避免斷更，只能發之前的了。css

通用字體系列

Serif字體

字體成比例，並且有上下短線。若是字體中的全部字符根據其不一樣大小有不一樣的寬度，則稱爲字體是成比例的。例如：小寫的i和m的寬度就不一樣。上下短線指的是每一個字符筆畫末端的裝飾，如大寫兩條腿底部的短線。包括Times\Georgia\New century Schoolbook。
html

sans-serif字體

字體成比例，且沒有上下短線(無襯線字體)，包括Helvetica\Geneva\Verdana\Arial\Univers
java

Monospace字體

字體不成比例，等寬字體，包括Courier\Courier New\Andale Mono
web

Cursive字體

手寫體，包括Zapf Chancery\Author\Comic Sans
瀏覽器

Fantasy字體

沒法歸類的字體，包括Western\Woodblock\Klingon
服務器

請看示例：markdown

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> html { width: 100%; height: 100%; font-size: 20px; } div { margin: 20px; background-color: gray; } .serif { font-family: "Times"; } .sans-serif { font-family: "Arial"; } .Monospace { font-family: "Courier"; } .Cursive { font-family: "Comic Sans"; } .Fantasy { font-family: "Western"; } </style>
    </head>  
    <body>  
        <div class='serif'>serif字體: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='sans-serif'>sans-serif字體: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='Monospace'>Monospace字體: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='Cursive'>Cursive字體: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='Fantasy'>Fantasy字體: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
    </body>  
</html>   
複製代碼

image.png
這裏只介紹CSS 字體
serif字體，能夠看到字母A是具備上下短線的，並且字母i和m的寬度不等，因此字體成比例。
svg

​

使用字體

font-family：[ <family-name> | <generic-family> ] #
複製代碼
  • = arial | georgia | verdana | helvetica | simsun and etc.
  • = cursive | fantasy | monospace | serif | sans-serif
  • 若是多個字體，則會首先匹配第一個字體。識別不到，纔會識別第二個
  • 字體爲多個單詞，則須要用引號將單詞包含起來
  • 若是隻想使用某一個通用字體，可是不關心具體的字體名稱，能夠直接使用通用字體名稱，如serif
    ​

中文字體

字體中文名 字體英文名
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft Yahei
微軟正黑體 Microsoft JhengHei
楷體 KaiTi
新宋體 NSimSun
仿宋 FangSong
更多詳情訪問文章
​函數

字體加粗

font-weight：normal | bold | bolder | lighter | <integer>
複製代碼

取值：

  • normal：正常的字體。至關於數字值400
  • bold：粗體。至關於數字值700。
  • bolder：定義比繼承值更重的值
  • lighter：定義比繼承值更輕的值
  • <integer>：用數字表示文本字體粗細。取值範圍：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

​

解釋bolder

首先咱們會獲得從父元素繼承而來的font-weight。當子元素設置成bolder的時候。會有一種規則(測試而來)：以下，

  • 100 | 200 | 300 -> normal (400)
  • normal (400) | 500 | 600 -> bold (700)
  • bold (700) | 800 | x > 900 -> 900

​

  • 當父元素的font-weight爲100 | 200 | 300，子元素的bolder都會跳到400。
  • 當父元素的font-weight爲normal (400) | 500 | 600，子元素的bolder都會跳到bold (700)。
  • 當父元素的font-weight爲bold (700) | 800 | x > 900，子元素的bolder都會跳到900。
.parent1 {
    font-weight: normal; /*400*/
}
 
.child1 {
    font-weight: bolder; /*700*/
}
 
 
.parent2 {
    font-weight: normal; /*100*/
}
 
.child2 {
    font-weight: bolder; /*400*/
}
 
 
.parent3 {
    font-weight: normal; /*700*/
}
 
.child3 {
    font-weight: bolder; /*900*/
}
複製代碼

image.png

解釋lighter

首先咱們會獲得從父元素繼承而來的font-weight。當子元素設置成lighter的時候。會有一種規則(測試而來)：以下

  • 500 | 400 | 300 | 200 | 100 -> 100
  • 700 | 600 -> normal (400)
  • 900 | 800 -> bold (700)
  • x > 900 -> (chorme: 400), (IE, firefox : 100)

​

字體大小

font-size：<absolute-size> | <relative-size> | <length> | <percentage>
複製代碼
  • <absolute-size>= xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>= smaller | larger
<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> html { width: 100%; height: 100%; } .xx-small { font-size: xx-small; } .x-small { font-size: x-small; } .small { font-size: small; } .medium { font-size: medium ; } .large { font-size: large ; } .x-large { font-size: x-large; } .xx-large { font-size: xx-large; } </style>
    </head>  
    <body>  
        <div>
            normal text
        </div>
        <div class="xx-small">
            xx-small text
        </div>
        <div class="x-small">
            x-small text
        </div>
        <div class="small">
            small text
        </div>
        <div class="medium">
            medium text
        </div>
        <div class="large">
            large text
        </div>
        <div class="x-large">
            xlarge text
        </div>
        <div class="xx-large">
            xx-large text
        </div>
    </body>  
</html>   
複製代碼


測試結果：

​

測試larger

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> html { width: 100%; height: 100%; } .child { font-size: larger; } .xx-small { font-size: xx-small; } .x-small { font-size: x-small; } .small { font-size: small; } .medium { font-size: medium ; } .large { font-size: large ; } .x-large { font-size: x-large; } .xx-large { font-size: xx-large; } </style>
    </head>  
    <body>  
        <div class="xx-small">
            <div class="child">
                xx-small parent
            </div>
        </div>
        <div class="x-small">
            <div class="child">
                x-small parent
            </div>
        </div>
        <div class="small">
            <div class="child">
                small parent
            </div>
        </div>
        <div class="medium">
            <div class="child">
                medium parent
            </div>
        </div>
        <div class="large">
           <div class="child">
                large parent
            </div>
        </div>
        <div class="x-large">
            <div class="child">
                x-large parent
            </div>
        </div>
        <div class="xx-large">
            <div class="child">
                xx-large parent
            </div>
        </div>
    </body>  
</html>   
複製代碼

image.png

​

測試smaller

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> html { width: 100%; height: 100%; } .child { font-size: smaller; } .xx-small { font-size: xx-small; } .x-small { font-size: x-small; } .small { font-size: small; } .medium { font-size: medium ; } .large { font-size: large ; } .x-large { font-size: x-large; } .xx-large { font-size: xx-large; } </style>
    </head>  
    <body>  
        <div class="xx-small">
            <div class="child">
                xx-small parent
            </div>
        </div>
        <div class="x-small">
            <div class="child">
                x-small parent
            </div>
        </div>
        <div class="small">
            <div class="child">
                small parent
            </div>
        </div>
        <div class="medium">
            <div class="child">
                medium parent
            </div>
        </div>
        <div class="large">
           <div class="child">
                large parent
            </div>
        </div>
        <div class="x-large">
            <div class="child">
                x-large parent
            </div>
        </div>
        <div class="xx-large">
            <div class="child">
                xx-large parent
            </div>
        </div>
    </body>  
</html>   
複製代碼


​

字體風格

  • normal：指定文本字體樣式爲正常的字體
  • italic：指定文本字體樣式爲斜體。對於沒有設計斜體的特殊字體，若是要使用斜體外觀將應用oblique
  • oblique：指定文本字體樣式爲傾斜的字體。人爲的使文字傾斜，而不是去選取字體中的斜體字
.italic {
    font-style: italic;
}
 
.oblique {
    font-style: oblique;
}
複製代碼

​

字體變形

font-variant：normal | small-caps
複製代碼
  • normal：正常的字體
  • small-caps：小型的大寫字母字體，若是文本源中出現大寫字母，則會顯示正常的大寫字母
<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css"> .normal { font-variant: normal; } .small-caps { font-variant: small-caps; } </style>
    </head>  
    <body>  
        <div class="normal">
            NORMAL 文字
        </div>
 
        <div class="small-caps">
            LARGE WORDS small-caps 文字
        </div>
    </body>  
</html>
複製代碼

image.pngimage.png
​
​

字體拉伸和調整（瞭解，幾乎全部的瀏覽器不支持）

字體拉伸

font-stretch：normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
複製代碼
  • normal：正常文字寬度
  • ultra-condensed：比正常文字寬度窄4個基數。
  • extra-condensed：比正常文字寬度窄3個基數。
  • condensed：比正常文字寬度窄2個基數。
  • semi-condensed：比正常文字寬度窄1個基數。
  • semi-expanded：比正常文字寬度寬1個基數。
  • expanded：比正常文字寬度寬2個基數。
  • extra-expanded：比正常文字寬度寬3個基數。
  • ultra-expanded：比正常文字寬度寬4個基數。

​

字體調整

font-size-adjust：none | <number>	
複製代碼
  • none：不保留首選字體的 x-height
  • <number>定義字體的 aspect 值**

​

複合屬性font

font：[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ] | caption | icon | menu | message-box | small-caption | status-bar	 
複製代碼
  • <' font-style '>：指定文本字體樣式
  • <' font-variant '>：指定文本是否爲小型的大寫字母
  • <' font-weight '>：指定文本字體的粗細
  • <' font-size '>：指定文本字體尺寸
  • <' line-height '>：指定文本字體的行高
  • <' font-family '>：指定文本使用某個字體或字體序列
  • caption：使用有標題的系統控件的文本字體（如按鈕，菜單等）（CSS2）
  • icon：使用圖標標籤的字體（CSS2）
  • menu：使用菜單的字體（CSS2）
  • message-box：使用信息對話框的文本字體（CSS2）
  • small-caption：使用小控件的字體（CSS2）
  • status-bar：使用窗口狀態欄的字體（CSS2）

​

@font-face

在 CSS3 以前，web 設計師必須使用已在用戶計算機上安裝好的字體。經過 CSS3，web 設計師可使用他們喜歡的任意字體。

當找到或購買到但願使用的字體時，可將該字體文件存放到 web 服務器上，它會在須要時被自動下載到用戶的計算機上。字體是在 CSS3 @font-face 規則中定義的。可是若是咱們下載的字體太大，會存在性能問題，不過好在如今的字體服務商給的文件都不大。

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
    [unicode-range： <unicode-range>];
}
複製代碼
  • YourWebFontName：指的就是自定義的字體名稱，最好是使用你下載的默認字體，它將被引用到你的Web元素中的font-family。如「font-family:」字體名」;」
  • Source：指的是自定義的字體的存放路徑，能夠是相對路徑也能夠是絕路徑；
  • Format：指的是自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有如下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
  • weight和style: weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。
  • unicode-range: 可選。定義字體支持的 UNICODE 字符範圍。默認是 "U+0-10FFFF"。

​

(1) 使用font-face自定義字體

@font-face {
    font-family: YourWebFontName;
    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");
}
複製代碼

​

(2) 聲明字體來源

@font-face規則中有一個很是重要的參數，就是src。其值主要是用於鏈接到實際的字體文件。此外，能夠聲明多個來源，若是瀏覽器未能找到第一個來源，他回一次寸照下面的字體來源。
上面聲明瞭四中字體：EOT, WOFF, TTF和SVG。

  • TureTpe(.ttf)格式
    .ttf字體是Windows和Mac的最多見的字體，是一種RAW格式，所以他不爲網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
  • OpenType(.otf)格式
    .otf字體被認爲是一種原始的字體格式，其內置在TureType的基礎上，因此也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
  • Web Open Font Format(.woff)格式
    .woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
  • **Embedded Open Type(.eot)格式 **
    .eot字體是IE專用字體，能夠從TrueType建立此格式字體,支持這種字體的瀏覽器有【IE4+】；
  • **SVG(.svg)格式 **
    .svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

​

(3) 建立各類字體

這裏以國內的網站有字庫爲例。

而後獲得對應的font-face代碼：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css"> @font-face { font-family: 'ChannelSlanted2'; src: url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.gif?r=76000373532'); src: url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.gif?r=76000373532?#iefix') format('embedded-opentype'), url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.png?r=76000373532') format('woff2'), url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.bmp?r=76000373532') format('woff'); font-weight: normal; font-style: normal; } .ChannelSlanted2 { font-family: "ChannelSlanted2" } </style>
    </head>  
    <body>  
        <div class="ChannelSlanted2">
            LARGE WORDS small-caps 文字
        </div>
    </body>  
</html>   
複製代碼

而後獲得咱們的圖字效果。
image.png
還能夠到網站（www.fontsquirrel.com/）去下載一些字體的格式。而後若是咱們的到只是其中一種格式的話，由於前面給出的網站下載的都是.otf格式，因此咱們還須要轉換成其餘格式。可使用下面的網站進行格式轉換。

​

(4) 延伸：@font-face使用本地字符

@font-face 規則中的src 描述符還能夠接受local()函數，用於指定本地字體的名稱。當不須要用到任何外部的Web 字體，就能夠直接在字體隊列中指定一款本地字體：

@font-face {
	font-family: Ampersand;
	src: local('Baskerville'),
	local('Goudy Old Style'),
	local('Garamond'),
	local('Palatino');
}
複製代碼

舉例：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> @font-face { font-family: Ampersand; src: local('Comic Sans MS'); } .icon { font-family: Ampersand } </style>
    </head>  
    <body>  
        <div class="icon">
            HTML & CSS
        </div>
    </body>  
</html> 
複製代碼

image.png

​

(5) 延伸：unicode-range控制字體應用範圍

當咱們想要控制字符應用的範圍，須要一個描述符來聲明咱們想用這幾款本地字體來顯示哪些字符。

unicode-range 描述符只在@font-face 規則內部生效（所以這裏用了描述符這個術語；它並非一個CSS 屬性），它能夠把字體做用的字符範圍限制在一個子集內。它對本地字體和遠程字體都是有效

這個unicode-range 在實踐中很是實用，但在語法上卻很是晦澀。它的語法是基於「Unicode 碼位」的，而不是基於字符的字面形態。

例如：咱們想是上面的示例中HTML & CSS中的&應用字體，其餘的不變化。

1) 在控制檯執行下面代碼獲得十六進制碼位

"&".charCodeAt(0).toString(16); // 返回26
複製代碼

2) 造成unicode-range代碼

須要在碼位前面加上U+ 做爲前綴

unicode-range: U+26; 
複製代碼

*若是你想指定一個字符區間，仍是要加上U+ 前綴，好比U+400-4FF。實際上對於這個區間來講，你還可使用通配符，以這樣的方式來寫：U+4??。同時指定多個字符或多個區間也是容許的，把它們用逗號隔開便可，好比U+26, U+4??, U+2665-2670。

3) 修改代碼以下

<!DOCTYPE html>  
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @font-face { font-family: Ampersand; src: local('Comic Sans MS'); unicode-range: U+26; } .icon { font-family: Ampersand } </style> </head> <body> <div class="icon"> HTML & CSS </div> </body> </html> 複製代碼

而後咱們看一下如今的樣式以及和以前的樣式對比（紅色的是帶有unicode-range的html，能夠看到當前只有&仍是和以前相同，其餘的不在應用Ampersand字體）：
image.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程