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

首頁

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 id="Web-Safe-Fonts"> 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 id="Fallback-fonts"> 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>