資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學什麼是 CSS 中的網頁安全字型和備用字型？
網站的設計目的是讓使用者瞭解公司、產品及其服務的資訊。任何網站都必須清晰明瞭，美觀大方，才能引起讀者的共鳴。網站的排版是使其保持一致並使其具有美感外觀的關鍵因素。整個網站的個性都由排版來塑造，這對於建立品牌識別至關重要。如果您使用獨特且一致的排版，使用者將開始將某種字型與您的品牌聯絡起來。
使用良好的排版，您可以保持讀者的興趣，並說服他們更長時間地停留在您的網站上。它透過建立良好的圖形平衡和強大的視覺層次結構來幫助建立網站的整體基調。此外，它會影響決策，並對讀者如何處理和解釋文字內容產生重大影響。它使內容更具吸引力，從而影響網站的可讀性。
Google 為開發者推出了各種網頁安全字型，可以免費下載。在本文中，我們將討論 CSS 提供的開發者可用的網頁安全字型和備用字型。
什麼是網頁安全字型？
網頁安全字型是在任何裝置上所有瀏覽器都支援的字型。即使這些字型未安裝在使用者的裝置上，這些字型也能確保開發者正確顯示它們。
在開發網頁安全字型之前，如果使用者的本地系統未安裝該字型，瀏覽器將顯示通用字型，例如Times New Roman。但是，開發者無法檢測到伺服器端字型是否顯示不正確。這會導致糟糕的使用者體驗。
使用網頁安全字型解決了這個問題。在網頁設計中，如果您使用網頁安全字型，您可以放心，您的字型將在每臺裝置上按原樣顯示。
語法
element{
font-family: font1;
}
網頁安全字型的種類
有六種網頁安全字型。它們如下所示：
襯線體 - 這些字型在每個字母的主體中包含小的突出部分。它們更容易在螢幕和印刷品上閱讀。Times New Roman 是一種襯線體字型。
等寬字型 - 這些字型在字母之間的間距相等。Space Mono、Courier、Inconsolata 等是等寬字型。
無襯線字型 – 這些字型與襯線字型相反。它們不包含小的突出部分。Arial、Helvetica、Futura、Calibri 等是一些無襯線字型的示例。
裝飾字型 - 這些字型風格化且裝飾性強。Papyrus、Herculanum、Luminari 是裝飾字型。
MS - 這些是 Microsoft 推出的字型。Trebuchet MS、MS Gothic、Georgia 等是 MS 字型。
手寫體 - 這些字型類似於手寫體。Brush Script MT、Broadley、Monarda、Raksana 等是一些手寫體字型。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<title> Web Safe Fonts </title>
<link rel= "preconnect" href= "https://fonts.googleapis.com">
<link rel= "preconnect" href= "https://fonts.gstatic.com">
<link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
<style>
h1{
color: green;
text-decoration: underline;
}
.demo1{
font-family: Times New Roman;
}
.demo2{
font-family: Arial;
}
.demo3{
font-family: Courier;
}
.demo4{
font-family: Brush Script MT;
}
.demo5{
font-family: Trebuchet MS;
}
.demo6{
font-family: fantasy;
}
</style>
</head>
<body>
<center>
<h2> Web Safe Fonts </h2>
<div class= "demo1"> This is an example in Times New Roman font. </div>
<div class= "demo2"> This is an example in Arial font. </div>
<div class= "demo3"> This is an example in Courier font. </div>
<div class= "demo4"> This is an example in Brush Script MT font. </div>
<div class= "demo5"> This is an example in Trebuchet MS font. </div>
<div class= "demo6"> This is an example in Fantasy font. </div>
</center>
</body>
</html>
什麼是 CSS 中的備用字型？
CSS 提供兩種型別的字體系列用於網頁設計。它們是通用字體系列，如襯線體 (Times New Roman、Georgia 等) 和單個字體系列，如 Arial、Calibri 等。
通用字體系列有一些外觀相似的字體系列，因此，如果主要字型在使用者的系統上不可用，則將存在一個備用機制，其中包含可替代使用的類似字體系列列表。這些字型稱為備用字型。它們在網頁設計中用作備份，因為沒有一種網頁字型是 100% 安全的。總是有出錯的可能性。
備用字型透過充當備份來解決此問題。那些網頁安全字型也可以設定為備用字型。一些備用字型的例子是手寫體、裝飾字型、等寬字型等。
語法
element{
font-family: font1, font2, font3, font4;
}
Font2、font3、font4 是用作備份的備用字型。如果瀏覽器不支援 font1，則將顯示 font2。如果 font2 不支援，則使用 font3，依此類推。
示例
<!DOCTYPE html>
<html>
<head>
<title> Fallback fonts </title>
<link rel= "preconnect" href= "https://fonts.googleapis.com">
<link rel= "preconnect" href= "https://fonts.gstatic.com">
<link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
<style>
.demo1{
font-family: verdana,'cursive';
}
.demo2{
font-family: cursive, Cochin, Georgia;
}
.demo3{
font-family: Helvetica, arial, cursive, 'Times New Roman';
}
.demo4{
font-family: 'Times New Roman', Cambria, Cochin, Georgia, Times, serif;
}
</style>
</head>
<body>
<center>
<h2> Fallback fonts </h2>
<p class= "demo1"> This is an example. </p>
<p class= "demo2"> This is an example. </p>
<p class= "demo3"> This is an example. </p>
<p class= "demo4"> This is an example. </p>
</center>
</body>
</html>
在上面的示例中，文字的字體系列是 font1。如果任何瀏覽器不支援 font1 字體系列，則我們旁邊有一系列字體系列可以用作備用字型。
結論
在網頁設計中使用網頁安全字型是一種良好的實踐，因為它可以確保開發者在使用者的裝置上顯示它。但是，網頁安全字型並非 100% 可靠。因此，請使用 CSS 備用字型作為字型的備份，以便如果字體系列不起作用，瀏覽器可以嘗試另一個已列出的字型。將通用字體系列用作第一個字型，然後使用相同型別的字體系列作為其他選項，是一種良好的編碼習慣。
瀏覽量：586
