CSS3 七 字型

Mirst發表於2020-10-28
CSSS3

目錄

CSS3 字型

CSS3 @font-face 規則

瀏覽器支援

使用您需要的字型

例項

使用粗體文字

例項

CSS3 字型描述

CSS3 字型

With CSS3, web designers are no longer forced to use only web-safe fonts

CSS3 @font-face 規則

使用以前 CSS 的版本，網頁設計師不得不使用使用者計算機上已經安裝的字型。

使用 CSS3，網頁設計師可以使用他/她喜歡的任何字型。

當你發現您要使用的字型檔案時，只需簡單的將字型檔案包含在網站中，它會自動下載給需要的使用者。

您所選擇的字型在新的 CSS3 版本有關於 @font-face 規則描述。

您"自己的"的字型是在 CSS3 @font-face 規則中定義的。

瀏覽器支援

表格中的數字表示支援該屬性的第一個瀏覽器版本號。


Firefox, Chrome, Safari, 和 Opera 支援 .ttf(True Type字型)和.otf(OpenType)字型字型型別）。Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支援 WOFF (Web Open Font Format) 字型.

Chrome, Safari 和 Opera 也支援 SVG 字型/摺疊.

Internet Explorer 同樣支援 EOT (Embedded OpenType) 字型.

注意： Internet Explorer 8 以及更早的版本不支援新的 @font-face 規則。

使用您需要的字型

在新的 @font-face 規則中，您必須首先定義字型的名稱（比如 myFirstFont），然後指向該字型檔案。

lamp提示：URL請使用小寫字母的字型，大寫字母在IE中會產生意外的結果

如需為 HTML 元素使用字型，請通過 font-family 屬性來引用字型的名稱 (myFirstFont)：

例項

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf')
		,url('Sansation_Light.eot'); /* IE9 */
}

div
{
	font-family:myFirstFont;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9 只支援 .eot 格式的字型.</p>

<div>
使用 CSS3,網站終於可以使用字型以外的預先選擇“合法”字型
</div>

</body>
</html>


嘗試一下 »

使用粗體文字

您必須新增另一個包含粗體文字的@font-face規則：

例項

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
@font-face
{
	font-family: myFirstFont;
	src: url(sansation_light.woff);
}

@font-face
{
	font-family: myFirstFont;
	src: url(sansation_bold.woff);
	font-weight:bold;
}

div
{
	font-family:myFirstFont;
}
</style>
</head>
<body>

<div>
	使用 CSS3,網站終於可以使用字型以外的預先選擇“合法”字型。
</div>

<p><b>注意:</b> Internet Explorer 8以及更早版本的瀏覽器 @font-face rule.</p>

</body>
</html>

 

嘗試一下 »

CSS3 字型描述

下表列出了所有的字型描述和裡面的@font-face規則定義：

描述符值描述
font-familyname必需。規定字型的名稱。
srcURL必需。定義字型檔案的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
可選。定義如何拉伸字型。預設是 "normal"。
font-style
  • normal
  • italic
  • oblique
可選。定義字型的樣式。預設是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
可選。定義字型的粗細。預設是 "normal"。
unicode-rangeunicode-range可選。定義字型支援的 UNICODE 字元範圍。預設是 "U+0-10FFFF"。

相關文章