CSS 中的網頁安全字體和後備字體是什麼？-css教學-PHP中文網

CSS offers two types of font families for web designing. These are generic font families like serif (Times New Roman, Georgia, etc.,) and the individual font families like Arial, Calibri etc.,.

在上面的例子中，文字的字體系列是font1。如果任何瀏覽器不支援font1字體系列，則我們在其旁邊有一個字體系列列表，可以作為備用字體使用。

在網頁設計中使用網頁安全字體是一個好的實踐，因為它確保開發者它將在使用者裝置上顯示。然而，網頁安全字體並不是100%可信賴的。因此，可以使用CSS備用字體作為字體的備份，以便如果一個字體系列不起作用，瀏覽器可以嘗試另一個列出的字體系列。使用通用字體系列作為第一個字體，然後使用相同字體系列作為其他選項是良好的編碼實踐。

首頁

web前端

css教學

CSS 中的網頁安全字體和後備字體是什麼？

王林

Aug 25, 2023 pm 11:33 PM

CSS 中的网络安全字体和后备字体是什么？

網站旨在為使用者提供有關公司、產品和服務的資訊。任何網站都需要清晰、美觀，以便讀者對其做出反應。網站的排版是使其一致並賦予其美感的關鍵因素。整個網站的個性都由排版所構建，這在創建品牌識別上至關重要。如果您使用獨特且一致的排版，用戶將開始將某種字體與您的品牌聯繫起來。

When you use good typography, you may keep readers' interest and persuade them to stay on your website for longer. By generating a solid graphic balance and a strong visual hierarchy, generating a solid graphic balance and a strong visual hierarchy, it aids in establishing. influences how decisions are made and has a significant impact on how readers process and interpret the text's material. It makes the content attractive and thus impacts in the readability of the website.

透過Google引入的各種適用於開發者的網頁安全字體，可以下載免費。在本文中，我們將討論網頁安全字體和備用字體

由CSS提供的字體可供開發人員使用。

什麼是網頁安全字體？

Web safe fonts are font which 由

在開發出網頁安全字體之前，如果使用者的本機系統沒有安裝該字體，瀏覽器會顯示通用字體，例如

Times New Roman。然而，開發人員無法偵測到伺服器端是否正確顯示字體。這導致用戶體驗不佳。

Using web safe fonts resolves this issue. During web designing, if you use web safe fonts, you can be rest assured that your fonts will be displayed as it is in every device. ##every device.

##文法

element{
   font-family: font1;
}

登入後複製

Kinds of web safe fonts

有六種網頁安全字體。它們如下所示 −

Serif - These fonts contain small protrusions that are present in the body of each letter. They are easier to read on screen and printed forms. Times New Roman is a serif font.
Monospace - 這些字體是字母之間有相等間距的字體。 Space Mono、Courier、Inconsolata等都是等寬字體。
無襯線字體 - 這些字體與襯線字體相反。它們不包含小突出部分。 Arial、Helvetica、Futura、Calibri等都是無襯線字體的一些例子。
幻想 - 這些字體具有高度的樣式和裝飾性。 Papyrus，Herculanum，Luminari是幻想字體。
MS - These are the fonts introduced by Microsoft. Trebuchet MS, MS Gothic, Georgia etc., are MS fonts.
草書 - 這些字體類似草書手寫體。 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 offers two types of font families for web designing. These are generic font families like serif (Times New Roman, Georgia, etc.,) and the individual font families like Arial, Calibri etc.,.

通用字體族有一些外觀相似的字體，因此，如果使用者係統上沒有可用的主要字體，就會有一個

備用

機制，其中包含一系列可以替代使用的相似字體族。這些字體稱為備用字體。它們在網頁設計中被用作備份，因為沒有任何一種網頁字體是100%安全的。總是存在錯誤的可能性。

備用

字體透過充當備份解決了這個問題。那些屬於網頁安全字體的字體族也可以設定為備用字體。一些備用字體的例子包括草書體、幻想體、等寬體等等#文法

element{
   font-family: font1, font2, font3, font4;
}

登入後複製

Font2, font3, font4

are the fallback fonts which are used as backup. If browser doesn't support font1, then font2 will be displayed. If not font2, then font3 is . Example

<!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>

登入後複製