首页
/
每日頭條
/
生活
/
css字體符号使用
css字體符号使用
更新时间:2025-07-08 16:53:37

1.字體大小(font-size)

  1. font-size屬性用于設置字号,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用像素單位px,絕對長度單位使用較少。具體如下:
  2. 1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素,那麼對于該元素,1em 就等于 16 像素。在設置字體大小時,em 的值會相對于父元素的字體大小改變。浏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。可以使用這個公式将像素轉換為 em:px/16=em(注:16 等于父元素的默認字體大小,假設父元素的 font-size 為 20px,那麼公式需改為:px/20=em)

css字體符号使用(6.CSS字體屬性)1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <Title>Title</title> <style> .my-font-size{ font-size: 28px; }</style></head><body> <div>碼海無際</div> <div class="my-font-size">碼海無際</div></body></html>

css字體符号使用(6.CSS字體屬性)2

2.定義字體(font-family)

  1. font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等。
  2. 可以同時指定多個字體,中間以逗号隔開,表示如果浏覽器不支持第一個字體,則會嘗試下一個,直到找到合适的字體。
  3. 在 CSS 中設置字體名稱,直接寫中文是可以的。但是在文件編碼(GB2312、UTF-8 等)不匹配時會産生亂碼的錯誤。xp 系統不支持 類似微軟雅黑的中文。可以使用英文來替代。比如 font-family:"Microsoft Yahei"。直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱,浏覽器是可以正确的解析的,font-family: "\5FAE\8F6F\96C5\9ED1",表示設置字體為“微軟雅黑”。

css字體符号使用(6.CSS字體屬性)3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-family{ /*font-family: 宋體;*/ /*font-family: SimSun;*/ /*font-family: \5B8B\4F53;*/ font-family: \5B8B\4F53,\9ED1\4F53; }</style></head><body> <div>碼海無際</div> <div class="my-font-family">碼海無際</div></body></html>

css字體符号使用(6.CSS字體屬性)4

3.字體加粗(font-weight)

範圍值 100 ~ 900 為字體指定了加粗級别。如果一個字體内置了這些加粗級别,那麼這些數字就直接映射到預定義的級别,100 對應最細的字體變形,900 對應最粗的字體變形。數字 400 等價于 normal,而 700 等價于 bold。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-weight{ /*font-weight: bold;*/ font-weight: 700; }</style></head><body> <div>碼海無際</div> <div class="my-font-weight">碼海無際</div></body></html>

css字體符号使用(6.CSS字體屬性)5

4.字體風格(font-style)

常用于設置斜體文本,該屬性有三個值:

  1. normal - 文本正常顯示
  2. italic - 文本斜體顯示
  3. oblique - 文本傾斜顯示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-style{ font-style: italic; }</style></head><body> <div>碼海無際</div> <div class="my-font-style">碼海無際</div></body></html>

css字體符号使用(6.CSS字體屬性)6

5.綜合設置字體樣式 (font)

  1. font屬性用于對字體樣式進行綜合設置
  2. 可設置的屬性是(按順序):"font-style font-weight font-size/line-height font-family"
  3. font-size和font-family的值是必需的。如果缺少了其他值,默認值将被插入,如果有默認值的話。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .my-font-one { font-style: italic; font-weight: bold; font-size: 20px; font-family: 宋體; } .my-font-two { font: italic bold 20px 宋體; } .my-font-three { font: 20px 宋體; }</style></head><body> <div>碼海無際</div> <div class="my-font-one">碼海無際</div> <div class="my-font-two">碼海無際</div> <div class="my-font-three">碼海無際</div></body></html>

css字體符号使用(6.CSS字體屬性)7

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
濱崎步生二胎
濱崎步生二胎
濱崎步歌手濱崎步(43歲)在15日之前更新了自己的博客。發布了最新照片。華麗的着裝在華麗的家庭花園...後面是一輛黑色的大車,上面寫着"你是我的價值",濱崎在令人震驚的粉紅色上衣上暴露了相同顔色的開衫、搖擺的耳環和金發卷發的...
2025-07-08
長痣的地方都代表着什麼
長痣的地方都代表着什麼
​​一、耳珠部位:耳朵肥厚的人,特别是耳垂部位,往往代表着一個人的富貴程度。若是在耳珠部位長有吉痣的,則财運往往能夠更上一層樓。二、額頭部位:額頭代表着父母、仕途及權利等,生在額頭上的吉痣則必定能使額頭所主的運勢或能力得到超常發揮,要麼官...
2025-07-08
紫外線消毒燈什麼顔色好
紫外線消毒燈什麼顔色好
紫外線消毒燈按照光源可分為UVC汞燈和UVCLED紫外線殺菌燈。由于汞紫外線燈在功率和輻射強度下對比LED紫外線殺菌燈上有較大優勢。因而,我們今天講講UVC汞紫外線殺毒燈如何選購。UVC汞紫外殺菌燈的大緻分類按照外觀設計的形狀不同,UVC汞...
2025-07-08
男生怎麼暗示女生自己喜歡她
男生怎麼暗示女生自己喜歡她
想知道女生喜歡心儀的男生時,會做哪些暗示嗎?每個女生的暗示方法雖然都有所不同,但并不會讓你毫無察覺。一個女生喜歡你的暗示你知道嗎?如何知道一個女生是否喜歡一個男生?作為單身狗的男生如何把握女生對你的窗口?暗示一:女生喜歡男生會和他談告白有關...
2025-07-08
萬相之王天蠶土豆一天更新幾章
萬相之王天蠶土豆一天更新幾章
今天,距離4月10日還有三天時間,天蠶土豆發布了新書最新信息,曝光了新書名,在橙瓜網文圈發帖,書名《萬相之王》。早在1月31日《元尊》完結之時,天蠶土豆就預告會在4月10日發布新書,沒想到時間一眨眼就到了。關于這次新書,天蠶土豆吐露,“新書...
2025-07-08
Copyright 2023-2025 - www.tftnews.com All Rights Reserved