資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用CSS新增同一字型的多個字型檔案？
使用CSS新增同一字型的多個字型檔案對於在所有裝置上正確顯示網頁至關重要。為此，包含同一字型的多個字型檔案非常重要。
在本文中，我們將瞭解使用CSS新增同一字型多個字型檔案的兩種不同方法。
新增同一字型多個字型檔案的方法
以下是使用CSS新增同一字型多個字型檔案的方法列表，我們將在本文中逐步講解並提供完整的示例程式碼。
使用@font-face規則新增多個字型檔案
為了使用CSS新增同一字型的多個字型檔案，我們使用了CSS @font-face規則，該規則允許我們使用標準安全網頁字型選項中不可用的自定義字型。
- 在專案目錄中建立一個資料夾，並將字型檔案上傳到其中。包含不同的檔案型別，例如.ttf、.woff和.eot。
- 我們使用@font-face規則匯入字型檔案。設定字型的font-family和url。
- 然後，我們使用元素型別選擇器（h3，h4）來指定文字的字體系列。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用@font-face規則新增同一字型的多個字型檔案。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Fonts Example</title>
<style>
@font-face {
font-family: 'Sofia Sans';
src: url('fonts/Sofia_Sans/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype'),
url('fonts/Sofia_Sans/OFL.txt') format('woff')
}
h3, h4 {
font-family: 'Sofia Sans', sans-serif
}
</style>
</head>
<body>
<h2>
Adding Multiple Font Files for Same Font Using CSS
</h2>
<p>
In this example we have used <strong>@font-face</strong> rule
to add multiple font files for the same font using CSS.
</p>
<h3>Welcome to Tutorials Point</h3>
<h4>This font is called Sofia Sans.</h4>
</body>
</html>
使用網路字型服務新增多個字型檔案
在這種使用CSS新增同一字型多個字型檔案的方法中，我們使用了**Google字型**。
- 我們將使用Google字型或Adobe字型等網路字型服務，並選擇所需的字型。
- 透過點選字型名稱旁邊的“+”圖示，選擇要新增到網頁的字型。
- 然後，我們使用帶有CSS font-family屬性的CSS選擇器來應用字型。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用CSS新增同一字型的多個字型檔案。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Font Example</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@100;200&display=swap" rel="stylesheet">
<style>
h3, h4 {
font-family: 'Sofia Sans', sans-serif;
}
</style>
</head>
<body>
<h2>
Adding Multiple Font Files for Same Font Using CSS
</h2>
<p>
In this example we have used <strong>Google fonts</strong>
to add multiple font files for the same font using CSS.
</p>
<h3>Welcome to Tutorials Point</h3>
<h4>This is the second example in this article.</h4>
</body>
</body>
</html>
結論
在本文中，我們討論了使用CSS新增同一字型多個字型檔案的不同方法。第一種方法是使用@font-face規則，它允許您從外部檔案匯入自定義字型並將其應用於網頁上的特定元素；第二種方法是使用**網路字型服務**（如Google字型）來輕鬆完成任務。
更新於：2024年11月11日
13K+ 次瀏覽
廣告