简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

css字體怎麼設定

coldplay.xixi
發布： 2021-03-25 14:54:11
原創
16482 人瀏覽過

css字體的設定方法：【font-family】規定元素的字體系列，【font-family】可以把多個字體名稱當作一個【回退】系統來儲存，如果瀏覽器不支援第一個字體，則會嘗試下一個。

css字體怎麼設定

本教學操作環境：windows7系統、css3版，DELL G3電腦。

css字體的設定方法：

font-family規定元素的字體系列。 font-family可以把多個字體名稱當作一個「回退」系統來儲存。如果瀏覽器不支援第一個字體，則會嘗試下一個。

範例：

設定文字的字型：

<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
登入後複製

效果圖：

css字體怎麼設定

在CSS 中，有兩種不同類型的字體系列名稱：

通用字體系列- 擁有相似外觀的字體系統組合（例如"Serif" 或"Monospace"）

特定字體系列- 特定的字體系列（例如"Times" 或"Courier"）

除了各種特定的字體系列外，CSS 定義了5 種通用字體系列：

  • Serif 字體

  • Sans-serif 字型

  • Monospace 字型

  • Cursive 字型

  • #Fantasy 字體

相關教學推薦：CSS影片教學

以上是css字體怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css字体
來源：php.cn
上一篇：使用純CSS畫一個圓環（程式碼範例） 下一篇：animate.css使用方法是什麼
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
透過新增 Width 屬性將內容向左移動 我已經為主體提供了邊距。主要{左邊緣：200px;右邊距：200px；文本對齊：居中}由於我想以兩行而不是一行顯示文本，因此我在樣式中添加了width屬性。 .p{字體大小：12p...
來自於 2024-04-06 22:01:35
0
3
816
MySQL從多個表中取得數據 我有一個eg_design表，其中包含以下幾列：和eg_domains表，其中包含以下列：和eg_fonts表，其中包含以下幾列：現在，基於$domain_id我想獲取eg_des...
來自於 2024-04-06 18:42:44
0
2
479
為什麼我的 hr 標籤設定為白色純色時是半透明的？ 我有一個html（帶有引導程式）和一個CSS，在我的html中我有一個<hr>標籤，它有一個類，然後在我的CSS中我有它的邊框樣式。它是半透明的，你可以看到白色，但它不...
來自於 2024-04-06 16:13:26
0
1
500
Expo無法載入字體 我一直在嘗試在Expo中加載字體，但是我一直得到相同的錯誤。這是我的程式碼：我的Index.js如下所示：importWelcomePagefrom"./Authenti...
來自於 2024-04-05 15:18:52
0
1
3611
推出一款透明瀏覽器，提升Web應用程式與PWA體驗【支援靜態HTML、CSS和JavaScript】【讓使用者在我們的網頁應用程式/PWA中檢視桌面桌布】 我是一個初級前端開發者和設計師，目前正在使用socket開發一個網頁應用程式（聊天）。我和我的朋友使用的語言有：Scala，HTML，CSS，JavaScript。我正在處理HTM...
來自於 2024-04-05 13:50:12
0
1
1367
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！