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>

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

Conclusion

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

以上是CSS 中的網頁安全字體和後備字體是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

這不應該發生：對不可能進行故障排除May 15, 2025 am 10:32 AM

解決這些不可能的問題之一，這是您從未想過的其他問題的問題。

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction