tft每日頭條

 > 生活

 > css字體符号使用

css字體符号使用

生活 更新时间:2024-12-05 04:00:24

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
查看全部
上一页 下一页
老機型大屏手機推薦
三支一扶學曆專科可以...

相关生活资讯推荐

热门生活资讯推荐

网友关注

關于
條款和條件 隱私政策 Cookie 設置
服務
登陸 注冊 聯系我們
tft每日頭條 美食 生活 職場 母嬰 時尚 科技 汽車
友情鏈接
zpostcode Recruit weather mreligion Yellowpages sport constellation shopping name game directory literature Word tour furnish Lottery tftnews lyrics News digital car dir Edu Finance
Copyright 2023-2024 - www.tftnews.com All Rights Reserved