diff --git a/files/zh-tw/web/css/@font-face/index.md b/files/zh-tw/web/css/@font-face/index.md index a4ebc21dfc7835..ec19edb4e11448 100644 --- a/files/zh-tw/web/css/@font-face/index.md +++ b/files/zh-tw/web/css/@font-face/index.md @@ -1,11 +1,13 @@ --- title: "@font-face" slug: Web/CSS/@font-face +l10n: + sourceCommit: ad6eb6b52b4b3082397e8e011bd59a6d88a8f5f3 --- {{CSSRef}} -`@font-face` [CSS](/zh-TW/docs/Web/CSS) [@ 規則](/zh-TW/docs/Web/CSS/At-rule)允許指定用於顯示文字之自定義字型，該字型可以從遠端伺服器或用戶自己電腦上安裝的本地字型載入。 +**`@font-face`** [CSS](/zh-TW/docs/Web/CSS) [@ 規則](/zh-TW/docs/Web/CSS/At-rule)用來指定一個自定義的字型，用於顯示文本；該字型可以從遠端伺服器加載，或者使用者本地安裝的字型。 ## 語法 @@ -20,67 +22,67 @@ slug: Web/CSS/@font-face } ``` -### 參數值 +### 描述符 - {{cssxref("@font-face/ascent-override", "ascent-override")}} - - : 定義字型的上升度量。 + - : 定義字型的上升量度。 - {{cssxref("@font-face/descent-override", "descent-override")}} - - : 定義字型的下降度量。 + - : 定義字型的下降量度。 - {{cssxref("@font-face/font-display", "font-display")}} - - : 根據字型是否及何時被下載並準備使用，決定字型的顯示方式。 + - : 決定字型在下載並準備使用時的顯示方式。 - {{cssxref("@font-face/font-family", "font-family")}} - - : 指定將用作字型屬性的字型值的名稱。 + - : 指定將作為字型屬性的字型名稱。 - {{cssxref("@font-face/font-stretch", "font-stretch")}} - - : {{cssxref("font-stretch")}} 值，接受兩個值來指定 font-face 支援的範圍，例如 `font-stretch: 50% 200%;`。 + - : 一個 {{cssxref("font-stretch")}} 值。接受兩個值以指定字型範圍，例如 `font-stretch: 50% 200%;` - {{cssxref("@font-face/font-style", "font-style")}} - - : {{cssxref("font-style")}} 值， 接受兩個值來指定 font-face 支援的範圍，例如 `font-style: oblique 20deg 50deg;`。 + - : 一個 {{cssxref("font-style")}} 值。接受兩個值以指定字型範圍，例如 `font-style: oblique 20deg 50deg;` - {{cssxref("@font-face/font-weight", "font-weight")}} - - : {{cssxref("font-weight")}} 值，接受兩個值來指定 font-face 支援的範圍，例如 `font-weight: 100 400;`。 + - : 一個 {{cssxref("font-weight")}} 值。接受兩個值以指定字型範圍，例如 `font-weight: 100 400;` > [!NOTE] - > font-variant 描述符已於 2018 年從規範中刪除。 {{cssxref("font-variant")}} 值屬性仍受支援，但沒有對應的描述符。 + > 字型變體參數值於 2018 年從規範中移除。{{cssxref("font-variant")}} 值屬性仍受支持，但沒有對應的描述符。 - {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}} - - : 允許控制 OpenType 字型中的進階排版功能。 + - : 允許控制 OpenType 字型的高級排版功能。 - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - - : 透過指定要變更的功能的四個字母軸名稱及其變更值，允許對 OpenType 或 TrueType 字型變更進行低階控制。 + - : 通過指定特徵的四字母軸名稱及其變化值，提供對 OpenType 或 TrueType 字型變體的低層級控制。 - {{cssxref("@font-face/line-gap-override", "line-gap-override")}} - - : 定義字型的行距。 + - : 定義字型的行間距指標。 - {{cssxref("@font-face/size-adjust", "size-adjust")}} - - : 定義與此字型關聯的字形輪廓和規格的乘數。這使得在以相同字型大小渲染時更容易配合各種字型的設計。 + - : 定義字型輪廓和指標的縮放乘數，方便在相同字型大小下協調不同字型設計。 - {{cssxref("@font-face/src", "src")}} - - : 指定對字型資源的引用，包括有關字型格式和技術的提示。`@font-face` 規則必須有效。 + - : 指定字型資源的參考，包括字型格式及技術的提示。該參數值是 @font-face 規則有效的必要條件。 - {{cssxref("@font-face/unicode-range", "unicode-range")}} - - : 字型中要使用的 Unicode 碼位的範圍。 + - : 指定字型所使用的 Unicode 碼位範圍。 ## 描述 -在使用 `url()` 和 `local()` 函數時，通常會將兩者一起使用，如此一來，若用戶的裝置上有安裝字型，就會使用本地字型，若沒有則會下載字型資源來使用。 +通常會同時使用 `url()` 和 `local()`，以便在使用者的設備上存在字型時優先使用本地字型，否則則下載字型檔案來使用。 -如果提供了 `local()` 函數，並指定了一個字型名稱來尋找用戶裝置上的字型，如果{{Glossary("user agent", "使用者代理")}}找到了匹配的字型，就會使用這個本地字型。否則，將會下載並使用 `url()` 函數指定的字型資源。 +如果提供了 `local()` 函數，指定了一個在使用者設備上尋找的字型名稱，且如果{{Glossary("user agent", "使用者代理")}}找到匹配的字型，則使用本地字型。否則，會下載並使用 `url()` 函數指定的字型資源。 -瀏覽器會按照聲明列表的順序嘗試加載資源，因此通常應該將 `local()` 寫在 `url()` 之前。兩個函數都是選擇性的，所以只包含一個或多個 `local()` 而沒有 `url()` 的規則塊也是可以的。如果需要更具體的字型格式（使用 `format()` 或 `tech()` 值），應該將這些更具體的版本列在沒有這些值的版本之前，因為較不具體的變體會先被嘗試並使用。 +瀏覽器會按照聲明列表的順序加載資源，因此通常應將 `local()` 寫在 `url()` 之前。這兩個函數都是可選的，因此可以僅包含一個或多個 `local()`，而不使用 `url()`。如果需要更特定的字型，例如帶有 `format()` 或 `tech()` 值的字型，應將這些版本列在不包含這些值的版本之前，否則會先嘗試並使用較不特定的版本。 -透過允許自定義字型，`@font-face` 可以設計內容而不必局限於所謂的「web-safe」字型（即那些非常常用、被認為是普遍可用的字型）。指定本地安裝的字型名稱以尋找和使用，使得可以在不依賴網路連接的情況下自定義字型而非使用基本字型。 +通過允許作者提供自己的字型，`@font-face` 使內容設計不再受限於所謂的「Web 安全」字型（即被認為是普遍可用的常見字型）。指定本地安裝字型的名稱，允許在不依賴網際網路連接的情況下，超越基礎字型進行客製化。 > [!NOTE] -> 在舊版瀏覽器上加載字型的回退策略描述在 [`src` 描述符頁面](/zh-TW/docs/Web/CSS/@font-face/src#指定舊版瀏覽器的後備方案)。 +> 有關為舊版瀏覽器加載字型的回退策略，請參考 [`src` 描述符頁面](/zh-TW/docs/Web/CSS/@font-face/src#指定舊版瀏覽器的後備方案)。 -`@font-face` 不僅可以在 CSS 的頂層使用，還可以在任何 [CSS 條件群組 @ 規則](/zh-TW/docs/Web/CSS/CSS_conditional_rules#at_規則)內使用。 +`@font-face` 規則不僅可用於 CSS 的頂層，也可以用於任何 [CSS 條件群組 @ 規則](/zh-TW/docs/Web/CSS/CSS_conditional_rules#at_規則)中。 ### 字型 MIME 類型 -| 格式 | MIME 類型 | -| -------------------- | ------------ | -| TrueType | `font/ttf` | -| OpenType | `font/otf` | -| Web 開放字型格式 | `font/woff` | -| Web 開放字型格式 2.0 | `font/woff2` | +| 格式 | MIME 類型 | +| ------------------ | ------------ | +| TrueType | `font/ttf` | +| OpenType | `font/otf` | +| Web 開放字型格式 | `font/woff` | +| Web 開放字型格式 2 | `font/woff2` | ### 備註 -- Web 字型受到相同網域的限制（字型檔案必須與使用它們的頁面位於相同網域），除非使用 [HTTP 存取控制](/zh-TW/docs/Web/HTTP/CORS)來放寬此限制。 +- Web 字型受相同域名的限制（字型檔案必須與使用它們的頁面在同一域名），除非使用 [HTTP 存取控制](/zh-TW/docs/Web/HTTP/CORS)來放寬此限制。 - `@font-face` 不能在 CSS 選擇器中宣告。例如，以下內容將無法運作： ```css example-bad @@ -102,45 +104,36 @@ slug: Web/CSS/@font-face ### 指定可下載字型 -下面這個範例指定一個可供下載的字型，並套用至文件的整個 ``： - -```html - - - - - - Web Font Sample - - - - This is Bitstream Vera Serif Bold. - - +以下範例指定一個可下載的字型，並將其應用於整個文件的 body： + +```html live-sample___web-font-example + + 這是 Bitstream Vera Serif 粗體。 + ``` -此範例網頁看起來會像這樣： +```css live-sample___web-font-example +@font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf"); +} + +body { + font-family: "Bitstream Vera Serif Bold", serif; +} +``` -{{EmbedGHLiveSample("css-examples/web-fonts/basic-web-font.html", '100%', '100')}} +{{EmbedLiveSample("web-font-example", "", "100px")}} -### 指定本地替代字型 +### 指定本地字型替代選項 -下面這個範例會套用使用者本地的「Helvetica Neue Bold」字型，只有當使用者未安裝該字型（兩種名稱都試過了），才會下載「MgOpenModernaBold.ttf」字型： +在此範例中，優先使用使用者本地的「Helvetica Neue Bold」；如果使用者未安裝該字型（會嘗試完整字型名稱和 Postscript 名稱），則改用可下載的字型「MgOpenModernaBold.ttf」： ```css @font-face { - font-family: MyHelvetica; + font-family: "MyHelvetica"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); + url("MgOpenModernaBold.ttf"); font-weight: bold; } ```