動態排版的可變字體

Barbara Streisand原創: 2024-12-09 14:59:12728瀏覽

您是否覺得追蹤不同粗細和樣式的多個字體檔案很乏味？對於網頁設計師來說，為普通、粗體、斜體和其他字體變體創建不同的文件可能具有挑戰性。這使創作過程變得複雜並阻礙了他們的工作流程。將所有這些變體合併到一個文件中怎麼樣？

這就是可變字體的用武之地。可變字體是 OpenType 字體技術的突破性進步，它允許一個字體檔案包含多種變體，例如常規、粗體和斜體。這意味著設計人員只需使用一個文件即可存取他們所需的所有各種粗細、樣式和寬度。這項發明使得不斷輕鬆地修改重量、寬度和傾斜等特性變得簡單，從而簡化了設計過程並促進了創作自由。

以 Kyiv Sans 字體為例，本文將研究 CSS 中不同字體的相關性，並展示粗細等品質甚至 MIDL 等非標準字體變體的重要性。使用這些工具，我們將學習如何在 CSS 中製作動態且美觀的排版。

可變字體簡介

可變字體技術架構使設計人員和開發人員可以使用 CSS 立即控制這些排版特徵，從而允許精確的更改以滿足專案的特定要求。這透過大幅降低載入時間並用單一可變字體檔案替換許多靜態字體檔案來提高 Web 效能。

可變字體的靈活性和準確性是傳統靜態字體文件聞所未聞的，構成了印刷技術的重大發展。傳統字體需要針對每種樣式和粗細的單獨文件，而可變字體則不同，它可以在一個可擴展文件中捕獲多種樣式。這是透過 OpenType 字體樣式實現的，該字體樣式允許沿著一個或多個軸不斷變化，例如粗細、寬度和光學尺寸。

CSS 中可變字體的好處

我們將引導您了解如何使用這些工具建立動態且美觀的 CSS 排版。讓我們來看幾個例子：

效率：透過將多種字體樣式組合到一個檔案中，可變字體可以最大限度地減少 HTTP 請求，加快頁面載入速度並提高整體效率。

靈活性：設計師可以精確地修改版式以適應不同的設計環境和使用者偏好，因為他們可以對 wght 等屬性以及 MIDL 和 CONT 等自訂屬性進行細粒度控制。

平滑過渡：可變字體允許動態更改字體樣式，避免離散字體檔案之間的突然切換。因此，字體樣式之間的過渡平滑流暢。

響應式排版：可變字體允許根據視口大小或其他使用者定義的參數進行調整，從而實現響應式排版，確保跨裝置的最佳易讀性和美觀吸引力。

動態排版：可變字體根據使用者互動或環境條件提供即時變化，因此支援動態，提高使用者參與度並產生身臨其境的體驗。

輔助功能：更廣泛的排版選項允許文字自訂和修改，以確保跨各種裝置和使用者偏好的易讀性和可讀性。

美學：在網路上，可變字體激發創意設計理念並挑戰印刷界限，為印刷表達和實驗開闢新的機會。

可擴展性：可變字體非常適合響應式設計，並保證文字在任何尺寸或解析度下都清晰易讀，因為它們可以在不損失品質的情況下進行擴展。

介紹使用可變字體的響應式動態版式的概念

現代網頁設計允許設計師使用響應式和動態排版以及不斷變化的字體來創建更靈活和迷人的排版體驗，讓我們剖析這些想法：

字體中的變數：變數字體是具有多種字體變體的單一字體文件，包括 wght 和特殊屬性 MIDL 和 CONT。與傳統字體相比，可變字體在版式設計中提供了更多的自由度和效率，傳統字體需要每種樣式都有不同的文件，並能夠在這些變體之間實現流暢的過渡。

響應式排版：設計文字以輕鬆適應多種螢幕尺寸、解析度和檢視環境稱為響應式排版。從大型桌上型電腦到手機以及介於兩者之間的所有設備，這保證了許多設備上的最佳可讀性和美觀性。動態字體大小、行距和其他排版變更有助於響應式排版改善使用者體驗和可存取性。

動態版式：動態版式透過將互動和動畫融入版式設計來增強響應式版式。 JavaScript 和 CSS（層疊樣式表）可協助設計人員開發適合內容變更、使用者互動或捲動行為的字體。動態排版使用 wght、MIDL 和 CONT 等組件來產生視覺吸引力和互動性，引導使用者註意力並吸引他們。

設計師透過將動態靈活的排版方法與不同的字體結合，創造出豐富、多功能、身臨其境的線上排版體驗。無論是根據使用者活動動態改變字體、動畫文字元素以突出顯示重要訊息，還是根據螢幕尺寸調整字體粗細和大小，這種方法都為數位設計中的創造力和發明提供了許多機會。

Kyiv Sans 的各種字體屬性允許設計師創建有趣且完美的印刷過渡。這透過增加網頁資料的美學吸引力和實用性來增強其互動性和用戶友善性。

了解可變字體屬性

各種字體提供了傳統靜態字體所不具備的一系列新特徵。了解這些特徵對於充分發揮可變字體的潛力是必要的。這些是一些基本的：

重量 (wght)： 沿著連續軸改變重量，可變字體可以在多個厚度等級之間實現無縫過渡。設計師可以在單一字體檔案中指定一系列粗細，從細到超粗，以及介於兩者之間的所有點。

中間層效果 (MIDL)： 此自訂軸可讓設計人員變更字體內的中間層效果。這可以賦予文字獨特的視覺風格，以及額外的設計自由和創造力。

對比（CONT）：另一個自訂軸是CONT，它可以改變字體的對比。透過根據設計要求動態改變對比度，這可以幫助最大限度地提高文字的可讀性和視覺吸引力。

理解和應用這些特質將幫助設計師製作出視覺上引人注目的字體。憑藉其不同的字體特徵，Kyiv Sans 提供了特殊的自訂選擇，可提高網頁排版的可用性和外觀。

可變字體中可用的附加軸和變體概述

除了傳統的粗細、寬度和光學尺寸修改之外，可變字體還提供了廣泛的個人化選擇。以下是可能可用的軸和變體的摘要：

可變字體設計者可能使用的幾個註冊軸由 OpenType 規格定義：

寬度（wdth）：此軸控製字體的水平擴展或壓縮，使設計者能夠修改字元的寬度。透過調整此軸，設計人員可以在不改變整體高度的情況下創建顯得更窄或更寬的字體，從而實現靈活的壓縮到擴展樣式。
傾斜（slnt）：此軸允許設計者在不改變字形結構的情況下對字元應用類似斜體的傾斜。斜軸通常模仿傳統斜體的效果，但保留直立的字母形式，使其可用於創建風格變化。
斜體（ital）：斜體軸在字體的直立和斜體版本之間切換。與僅傾斜字符的傾斜軸不同，斜體軸涉及字符的完全重新設計，以反映真正斜體的草書性質，提供更真實的斜體風格。
光學尺寸 (opsz)：此軸調整字體的設計以優化不同尺寸下的可讀性。例如，較小的尺寸可能具有較粗的筆劃和更多的開放式計數器，以獲得更好的易讀性，而較大的尺寸可能會更加精緻和精緻。該軸對於跨各種媒體的響應式排版特別有用。
等級（GRAD）：等級軸允許對字體的筆劃粗細進行細微調整，而不影響整體間距。它對於提高不同列印或螢幕環境中的可讀性非常有用，其中稍微增加或減少粗細可以增強對比度和清晰度。
對比 (CNTR)：此軸修改字體內粗筆畫和細筆畫之間的對比。透過調整對比度，設計師可以創造具有不同程度的強調和視覺衝擊力的字體，從低對比的人文風格到高對比度的現代設計。
X 高度 (xhgt)：此軸調整小寫字母相對於字體大寫字母的高度。增加 x 高度可以提高小尺寸下的易讀性或創造更現代的外觀，而減少 x 高度可以喚起更傳統或正式的感覺。

除了註冊的軸之外，可變字體創建者還可以指定自己的自訂軸。關於 Kyiv Sans：這些包括：

中間層效果（MIDL）：此自訂軸為設計師提供了更多設計多功能性，並允許他們更改字體內的特定中間層效果，從而添加原始風格方面。
對比（繼續）：此自訂軸有助於控製字母形式中粗筆畫和細筆畫之間的對比。設計師可以動態地改變這一特性，以實現各種程度的印刷表現力，從柔和的對比到更明顯的變化。

除了註冊的軸之外，建造新軸的選項還允許字體設計者實現對字體外觀和特徵的高度客製化和複雜控制。例如，MIDL 和 CONT 等自訂軸使設計人員能夠定製字體的特殊品質，從而實現靈活且富有表現力的排版。這些自訂與可變字體註冊相結合，提供了多種方法來創建不同的印刷效果。例如，中間層效果（MIDL）軸可讓設計師改變字體內獨特的中間層，添加獨特的視覺品質，從而增強藝術自由度。另一方面，對比度（CONT）軸控制粗筆畫和細筆畫之間的變化，允許動態調整範圍從微妙到明顯的對比。透過與「粗細」和「中間層效果」等軸交互，設計人員可以創建具有不同粗細和獨特樣式的文本，從而實現對字體外觀的精確控制。同樣，結合粗細和對比度的變化可以創建具有不同程度的粗體和筆劃對比度的文本，從而平衡視覺衝擊和可讀性。這些範例展示了註冊軸和自訂軸提供的無與倫比的自由度，使設計人員能夠根據自己特定的美學偏好和設計目標調整字體。

在 CSS 中實現可變字體

現在您已經對可更改字體的可能性著迷了，讓我們研究一下如何在基於 CSS 的 Web 專案中應用它們。 CSS 提供了正確使用這些自適應字體功能的方法。首先使用 @font-face 定義字體，它允許您提供不同的字體檔案及其特徵。設定字體後，您可以使用不同的 CSS 屬性動態變更字體的軸，從而最大化不同字體提供的可能性。

取得字體

首先，我們必須下載專案所需的可變字體。
互聯網上的一些網站允許我們存取不同的字體檔案。一些最常用的字體網站如下：

類型網路
字體松鼠
Adobe 字型
字體彈簧
Google字體
Vfonts.com

在這個範例中，我們將前往 Vfonts.com 下載 Kyiv Sans 可變字體。 ttf 或 woff2 檔案格式運作正常，但我們將在本示範中使用 ttf。如果您需要將字體檔案從 ttf 轉換為 woff2，請前往 everythingfonts.com：

Variable Fonts for Dynamic Typography

上面的螢幕截圖顯示了您到達 Vfont 時會看到的內容。

我們將專案分為以下步驟：

導覽至 vfont：造訪提供可變字體資源的網站。
選擇 Kyiv* 類型：選擇 Kyiv* Type 字體，這會將您重定向到託管該字體的 Behance.net。
訪問下載連結：在 Behance 頁面上，一直向下滾動以找到下載字體的連結。
從 Google 雲端硬碟下載：點擊下載鏈接，您將進入 Google 雲端硬碟資料夾。從那裡下載字體檔案。
解壓縮檔案：下載後，解壓縮檔案以存取其內容。
查看字型選項：解壓縮後的資料夾包含多個選項可供選擇。
- 圖示
- 沒有變數
- 變數
選擇可變字體：專注於包含可變字體的檔案。
- 襯線
- 傾斜
- Sans
使用 Sans 字體：設定和使用 Sans 版本的字體。請注意，Sans 字體粗細檔案為 360 KB，相當於使用八個非可變字體檔案。
評估權衡：考慮使用可變字體對於您的專案是否值得。如果您只需要常規、粗體和斜體樣式，則可能不需要使用可變字體。但是，如果您需要對變體進行高級控制，可變字體可能非常有用。

注意：以上這些文件都是TTF格式。

現在我們將前往 VSCode，我們將在其中使用普通的 vite 專案。
要開始處理該項目，您必須安裝必要的套件。您必須按照以下步驟操作：

開啟一個新終端。
運行指令
```
npm create vite@latest
```
為您的專案命名。
為您的包裹命名。
選擇一個 Vanilla 框架。
選擇 JavaScript 變體。
執行 npm install 將協助您協商進入專案並安裝必要的模組。
設定依賴項後，使用以下命令啟動應用程式：
```
npm run dev
```
造訪 http://localhost:your-port-number 即可存取瀏覽器上正在執行的程式。

一旦我們完成了我們的項目，我們將擁有大量的模擬程式碼，我們可以修改它們來建立我們想要的應用程式。下載的可變字體應放入字型資料夾中，該資料夾將放入公用資料夾中。我們將替換 style.css、main.js 和 index.html 中所有不必要的模擬程式碼。

index.html 程式碼應如下圖所示：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

現在，讓我們解釋一下上面程式碼中發生的事情：

設定正文的預設字體：

npm create vite@latest

用途：這將整個文件的預設字體設為「Kyiv Sans」。
影響：正文中的所有文字元素都將繼承此字體，除非被更具體的樣式覆蓋。

定義自訂字體：

npm run dev

用途：@font-face 規則可讓您定義自訂字體。
字型名稱：字型名為「Kyiv Sans」。
來源：字型檔位於/font/KyivTypeSans-VarGX.ttf。
字體粗細範圍：此字體支援0到1000的粗細範圍，使其成為可變字體。
字體顯示：交換確保使用後備字體立即顯示文本，直到載入自訂字體。

設計

樣式元素：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

顏色：將文字顏色設定為#bd0c0c，紅色陰影。
高度：高度設定為100vh，使得
元素跨越視口的整個高度。
顯示：網格用於佈局，允許使用網格屬性。
居中內容：位置內容：中心使內容垂直和水平居中。
邊距：邊距設定為 0 以刪除
周圍的任何預設間距。
文字對齊方式：文字水平居中。

設定 .variable-font 類別的樣式：

body {
  font-family: 'Kyiv Sans';
}

字型系列：使用「Kyiv Sans」作為文字。
字體大小：將字體大小設定為5rem（相對於根元素的字體大小）。
行高：1.1 確保行間有輕微的間距。
字型粗細：初始設定為100。
字體變體設定：利用可變字體的自訂變體設定：
- 'wght' 控制權重（初始為 100）。
- 'CONT' 和 'MIDL' 是該字體的自訂軸，最初分別設定為 250 和 0。
過渡：在 500 毫秒內平滑過渡字體變化設定。

為.variable-font添加懸停效果：

npm create vite@latest

懸停時的字體粗細：當元素懸停在上方時改為 1000。
懸停時的字體變化設定：將變化設定更新為：
- 「重量」為 1000
- 「繼續」仍為 250
- “MIDL”更改為-1000
效果：當使用者將滑鼠停留在文字上時創建動態、互動的視覺效果，突顯可變字體的靈活性。

最後我們的結果看起來有點像這樣；
Variable Fonts for Dynamic Typography

使用可變字體建立響應式版式

透過讓設計師實現跨多種裝置和螢幕尺寸的完美適應，具有各種字體的響應式排版改變了線上設計。可變字體具有無與倫比的多功能性，它允許在單一字體檔案中不斷更改字體屬性，包括粗細、寬度和對比度。設計人員可以使用 CSS 和媒體查詢動態更改這些字體屬性，以提高可讀性和美觀性，確保文字在從桌面顯示器到手機的任何裝置上呈現最佳效果。由於單一可變字體可以取代多個固定字體文件，因此減少了大量字體載入的需要並提高了網站效能。這種靈活性不僅改善了使用者體驗，也簡化了設計流程。如果沒有響應式排版——它變得更有吸引力、更有高效，並且可以使用不同的字體進行存取——現代網頁設計就不可能存在。

媒體查詢：螢幕尺寸適應大師

媒體查詢是響應式網頁設計的基石，是螢幕尺寸適應的大師。基於使用者設備的功能（例如螢幕寬度、高度、解析度和方向），它們允許設計人員應用特定的 CSS 樣式。媒體搜尋可協助設計人員確保網站在各種裝置（從筆記型電腦和桌上型顯示器到智慧型手機和平板電腦）上都能以最佳方式呈現和運作。

媒體查詢的強大之處在於它們能夠產生適合各種螢幕尺寸的靈活且流暢的佈局。媒體查詢允許設計人員更改字體大小、更改網格佈局，甚至根據視窗測量隱藏或顯示某些項目。這確保了無論使用什麼設備，材料都能保持其美觀性和可訪問性。

媒體查詢定義斷點－佈局調整以適應不同螢幕尺寸的特定位置。針對不同的設備，這些斷點是使用 min-width、max-width 和其他 CSS 特性設定的。例如，媒體查詢可能會為 768 像素或更小的螢幕寬度指定使用適合行動裝置的佈局，並為較大的顯示器指定不同的佈局。

將媒體搜尋納入網頁設計可提高可近性和使用者體驗。在所有平台上，媒體查詢透過保證文字可讀、導航直觀且材料組織良好，有助於開發包容性數位體驗。任何希望創建響應式、適應性強和用戶友好的網站的網頁設計師都必須先學習在不同裝置使用時代的媒體查詢。

這是一個例子：

npm create vite@latest

在此範例中，我們使用媒體查詢根據螢幕尺寸調整字體變化設定和字體粗細。對於最大寬度為 600px 的設備，字體大小會減少為 3rem。針對 :hover 效果相應調整粗細和其他變化，對於寬度在 601px 到 1200px 之間的設備，字體大小設定為 4rem，並調整粗細和變化。對於寬度為1201px及以上的設備，字體大小為5rem，保持原來的設定。
這些媒體查詢可確保字體適應不同的螢幕尺寸，從而提高各種裝置上的可讀性和使用者體驗。

Variable Fonts for Dynamic Typography

上圖為小螢幕的顯示

Variable Fonts for Dynamic Typography

上圖顯示了中螢幕的顯示

Variable Fonts for Dynamic Typography

上圖為大螢幕顯示

視口單位：使佈局流暢

視窗單元是現代網頁設計中的強大工具，可以創建流暢且響應式的佈局，無縫適應不同的螢幕尺寸。視口單位包括vw（視口寬度）和vh（視口高度），它們是相對於瀏覽器視窗的尺寸而言的。 1 vw 等於視口寬度的 1%，1 vh 等於視口高度的 1%。這些單元可協助設計人員確保元素根據使用者螢幕的大小進行縮放，從而產生更具動態性和適應性的設計。例如，以視窗單位設定字體大小、填滿或邊距，可以讓文字和物件自動調整大小，從而在多個裝置上保持一致的外觀。無論網站顯示在大型桌面顯示器或小型行動螢幕上，這種適應性都可以確保內容保持可讀性和美觀性，從而增強用戶體驗。視口單元讓設計人員能夠創建適應性強的佈局，可以輕鬆移動以適應數位設備不斷變化的地形。

以下是如何使用 vw 根據視窗寬度調整字體大小的範例：

npm create vite@latest

在此範例中，在上面的程式碼中，.variable-font 的 font-size 屬性是使用視窗寬度 vw 單位設定的，使文字大小響應於視窗的寬度。

我們可以將媒體搜尋和具有不同字體特徵的視口單元結合起來，創建真正響應式的排版，優雅地適合每種設備或螢幕尺寸。這使我們能夠提供出色的用戶體驗，而與某人為我們網站選擇的存取方法無關。

具有可變字體的高級印刷效果

可變字體開啟了複雜印刷效果的新領域，使設計人員能夠創建高度客製化和動態的文字樣式。設計師現在可以透過不斷調整粗細、寬度和自訂軸等特性來創建無縫過渡和不尋常的視覺效果，而這些效果以前使用固定字體很難實現。可以透過調整字體動態來變更粗細、對比度和中線，從而提供對文字外觀的複雜控制。這種適應性在響應式設計中非常強，字體可以輕鬆調整以適應各種螢幕尺寸和方向。此外，互動式動畫允許文字響應用戶操作，例如懸停或單擊，產生有趣和身臨其境的體驗。視窗單元與不同的字體特徵相結合，確保排版保持流暢和可擴展，從而提高各種設備上的可讀性和外觀。利用這些複雜的功能，設計師可以透過擴展傳統排版的可能性來創建視覺上引人注目的數位材料。讓我們來探索一些擴展線上排版界限的有趣方法：

流體版式

流體排版是一種設計方法，文字可以根據視口的大小動態縮放，從而在許多裝置上提供流暢且響應靈敏的閱讀體驗。視窗單元、媒體搜尋和可變更的字體讓流暢的排版確保文字保持清晰和視覺平衡，與螢幕尺寸無關。此方法消除了對固定字體大小的需求，並允許無縫更改，從而以適合不同顯示條件的方式提高可讀性和外觀。

這是一個例子：

npm run dev

工作原理：

calc() 功能： 此函數透過組合相對單位 vw 和固定值 rem 來產生流體縮放效果。 font-size，例如，calc(2rem 2vw) 會對視窗寬度做出反應並確保基本尺寸。

各種元素的流體排版： 許多元素（例如 h1、h2 和 p）可以使用流體排版保證文字在不同設備上適當縮放。 calc() 函數提供一個基本尺寸，其縮放因子隨視窗寬度而變化。

可變字體：將流體排版與可變字體結合，您可以根據視口大小實現文字屬性的動態變化。
此方法可確保文字在各種裝置和螢幕尺寸上保持美觀和可讀性。

透過動畫文本，動態排版賦予文本生命，並產生有趣和動態的視覺效果，吸引觀眾。此方法透過使用 JavaScript 和 CSS 動畫更改文字屬性來添加運動和互動。在使用可變字體的範例中，使用 :hover 效果對字體粗細進行動畫處理，我們示範了動態排版，即從較淺的粗細無縫過渡到較粗的粗細。這不僅強調了內容，還展示瞭如何透過流暢、即時的變化，改變字體可以改善使用者互動。動態排版使設計師能夠提高文字的視覺吸引力和可用性，增強其在互動式和有趣的數位環境中的基本作用。

例：懸停時的重量動畫

npm create vite@latest

在這裡，我們使用平滑過渡將 .variable-font 元素的粗細設定為 :hover 時從常規 100 到粗體 1000 的動畫效果，從而創建微妙但有影響力的效果。

這些只是不同字體提供的一小部分富有想像的機會。從動態動畫到流暢佈局，有足夠的機會創造獨特且有趣的字體。只要有一點創意和對 CSS 的理解，我們就可以挑戰網頁設計規範並產生相當出色的使用者體驗。

結論

可變字體－Kyiv Sans 的最佳示範是透過將多種字體樣式分組到一個檔案中來轉換網路上的版式。透過減少HTTP查詢的數量，本發明簡化了流程、增加了設計靈活性並提高了效能。設計師可以充分利用 CSS 中的可變字體來製作響應式動態字體，完美適應各種螢幕尺寸和使用者互動。
設計人員可以使用粗細、中間層效果和對比度等屬性以及媒體查詢和視口單元等回應方法來創建視覺上吸引人且易於存取的排版體驗。可變字體是當代網頁設計的必要工具，因為它們的流動性為藝術表達提供了新的方向。

資源

查看 Netlify 上託管的即時預覽
查看原始碼

參考

可變字體
OpenType
Kyiv Sans
視口
字體
註冊軸
自訂軸
@font-face
類型網路
字體松鼠
Adobe 字型
字體彈簧
Google字體
Vfonts.com
ttf
沃夫2
everythingfonts.com
Behance.net
媒體查詢
px
雷姆
大眾
嗯
計算()

以上是動態排版的可變字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：為什麼不同瀏覽器中的「元素」的 Flexbox 行為會有所不同？下一篇：為什麼不同瀏覽器中的「元素」的 Flexbox 行為會有所不同？

看更多

動態排版的可變字體

可變字體簡介

CSS 中可變字體的好處

介紹使用可變字體的響應式動態版式的概念

了解可變字體屬性

可變字體中可用的附加軸和變體概述

在 CSS 中實現可變字體

取得字體

樣式元素：

元素跨越視口的整個高度。

周圍的任何預設間距。

使用可變字體建立響應式版式

媒體查詢：螢幕尺寸適應大師

視口單位：使佈局流暢

具有可變字體的高級印刷效果

流體版式

例：懸停時的重量動畫

結論

資源

參考

相關文章