CSS字型和文字相關

2021-09-13 15:47:55 字數 4969 閱讀 8207

目前在做ife的練習,初步學習到css內容,所以做了總結。

本博文主要分為兩部分,第一部分介紹css字型屬性,第二部分則介紹了文字常用屬性

s1 首先介紹一下什麼是字型系列:

所謂字型系列,我理解的就同一字型下 的不同風格的具體字型的集合。通俗模擬一下,我們知道楷書下有不同風格的字型,比如顏體、柳體、瘦金體等等,這些是具體的不同風格的字型。但是,他們都屬於楷體,只是具體的細節有差異。這裡的楷體,就可以看做
是乙個單獨的字型系列。

s2 接下來介紹,css預定義的5種通用字型系列

serif字型: 有修飾性的襯線(修飾線條),而且字元之間是成比例的(寬度不一致);

sans-serif字型: 沒有襯線,字元成比例;

monospace字型: 每個字元具有相同寬度的字型,通常用於**列表;

cursive字型: 模擬人類筆跡的字型,具有流動的連線筆畫;

fantasy字型: 裝飾性的各種 「浮誇」 字型

s3 定義字型系列的方法

使用font-family屬性來定義字型系列

a1 可以指定乙個通用字型系列;

a2 可以指定乙個具體的字型系列,注意當該具體字型系列在客戶端不可用時,瀏覽器會使用預設設定字型顯示;

所以,最好的方法是,結合特定字型名和通用字型系列,以實現平穩退化原則

s4 特別注意

如果乙個字型名中有乙個/多個空格/特殊字元如#、$之類的,需要用引號宣告字型,如下**例子:

p
網頁安全字型

關於網頁安全字型的概念,參見mdn基本文字和字型樣式;

s1 首先介紹字型加粗屬性font-weight

a1 值是關鍵字/100~900的整百數值,

一般情況下,400≈normal / 700≈bold,

關於數值加粗的原理,詳情見 css權威指南p109 ,真正用的時候,一般直接用數值試一試即可

a2 具有繼承性

s2 bolder/lighter屬性值的原理

a1 確定繼承自父元素的font-weight值;

a2 選取比繼承的font-weight對應值 + 更粗一級數值中的 + 最小的數值;

a3 如果繼承的font-weight值 已經是 最大900/最小100,那麼bolder/lighter值保持不變

s1 首先介紹字型大小屬性font-size

a1 值可以是 關鍵字/ length / percentage / em / rem

關鍵字: 實際開發中很少使用

em/百分比: 根據父元素的字型大小計算, 1em = 當前元素的父元素上 設定的字型大小

因為具有繼承性,所以可能會導致縮放失控,比如:

a 祖先元素:12px;

b 父元素: 120%, 即 12 * 1.2 = 14.4px(可能會取整);

c 子元素: 135%, 即 14.4 * 1.35 = 19.44px

rem: 1rem 等於 html 中的根元素的字型大小,推薦使用

a2 具有繼承性

s2 明確乙個重要概念:

a1 每種字型的字元設計大小一般都等於小於 其模板框em框大小;

a2font-size的作用就是設定給定字型的em框的大小,而不能保證實際顯示的字元大小

簡而言之,就是font-size負責的是模具的大小,而不是真正實際字元的大小

s1 字型風格屬性font-style

a1 值可以是 normal / italic/oblique (通常兩者效果是一樣的,都是斜體)

s2 字型變形屬性font-variant

a1 值可以是 small-caps, 用於建立 小型大寫字母文字(具體效果見css權威指南p124)

s3 字型拉伸屬性font-stretch,了解即可

s4 字型大小調整屬性font-size-adjust,了解即可

s1 所有字型屬性的 集合屬性font

a1 一般值是 font-style/font-weight/font-variant(可交換順序) + font-sieze + font-family

a2 值還可以是 line-height (不推薦合併寫,不利於維護)

a3 值還可以是 caption/icon/menu等系統字型設定,可以創造出和預設作業系統一樣的字型效果 (見p131)

s2 特別注意,所有未顯式賦值的font值,都會被瀏覽器自動賦予預設值

s1 具體過程了解即可,見p132-133

s1 文字縮排屬性text-indent

a1 值可以是 length / em/百分比 (相對於包含塊的寬度值)

其中,值的長度可以是負值,從而創造出「懸掛縮排的效果」

a2 應用於 塊級元素,無法應用於行內元素&替換元素(如果想要行內元素有縮排效果,可以使用左內邊距/外邊距)

a3 縮排只應用於乙個塊級元素的第一行內容

a4 具有繼承性

s2 文字水平對齊屬性text-align

a1 值可以是 left / center /right / justify

其中,justify表示兩端對齊文字 (p140)

a2 應用於 塊級元素

a3 具有繼承性

s1 什麼是line-height屬性

a1 指的是文字行之間的 最小基線距離,換言之,文字行間的距離可能比line-height值更大

a2 行間距 = line-height值 - font-size值

s2 理解行內元素高度如何確定(並不絕對精確,只是大概情況)

a1 font-size值, 確定了 內容區大小;

a2 line-height值,確定了 行內框高度;

a3 行框(從最高行內框的頂部 到 最低行內框的底部),確定了 一行行內元素的高度

s3 屬性特點

a1 值可能是 length / em / number / normal

normal值,通常情況下是字型大小的 1.2倍 (font-size * 1.2)

em/百分比,相對於的是 元素的字型大小(注意,不是父元素的字型大小,只有沒有顯式繼承該元素的fz,才會根據fz繼承性向上找)

a2 可以應用於所有元素 (對於塊級元素和內聯元素的區別,詳見其他博文)

a3 可以繼承

因為具有繼承性,所以可能會有以下情況: 繼承的div元素的line-height值小於 顯式設定的fz值,導致擁擠

解決方法是,使用number作為「繼承因子」,這樣各個元素都會根據自己的fz值,來計算line-height值了

s1 文字垂直對齊屬性vertical-align

a1 值可以是 middle/bottom等關鍵字 length / em/百分比 (相對於該元素的line-height值)

a2 應用於 行內元素和替換元素(影象/表單等)

a3 不可以繼承

a4 注意,所有垂直對齊的元素都會影響行高,換句話說,一行元素的行高 會包含住垂直對齊的高度

s2 基線對齊情況

a1 對行內元素,基線對齊是指:元素的基線與其 父元素的基線 對齊;

a2 對替換元素,基線對齊是指:元素的底端與其 父元素的基線 對齊 (因為替換元素壓根就沒有基線)

這就會導致,可能影象下方會出現一段空白的問題

a3百分比/em 對齊情況

會把 行內元素的基線 /替換元素的底邊,相對于父元素的基線公升高/降低數值

s3 居中對齊情況

a1 對middle值,指的是: 元素行內框的中點 與其 父元素基線上方0.5ex處的乙個點對齊;

s4 頂端/底端對齊情況

a1 對bottom值,指的是: 元素行內框的底部 與其 所屬行框的底部對齊;

a2 對text-bottom值,指的是: 對行內元素的 行內文字內容區 對齊 + 對替換元素無效

s1 字間隔屬性word-spacing

a1 值可以是 length / em / normal

a2 應用於 所有元素

a3 用於修改字和字之間的距離,了解即可

s2 字母間隔屬性letter-spacing

a1 值可以是 length / em / normal

a2 應用於 所有元素

a3 可以用來製造出 突出強調的效果 (見p152)

s1 文字大小寫 轉換屬性text-transform

a1 值可以是 uppercase等關鍵字

a2 應用於 所有元素

s1 文字裝飾線 屬性text-decoration

a1 值可以是 underline等關鍵字

a2 應用於 所有元素

a3 不可以繼承,但可以 覆蓋下劃線樣式(p158)

s1 文字陰影 屬性text-shadow

a1 值可以是 color + 右偏移長度 + 下偏移長度 + [模糊半徑]

a2 應用於 所有元素

a3 不可以繼承

s2 可以實現多重陰影

s1 文字空白符和換行屬性white-space

a1 值可以是 pre / nowrap / pre-wrap / pre-line

值為pre時:保留html內容中的空格

值是nowrap: 阻止元素內的文字換行

a2 應用於 所有元素

a3 不可以繼承

a4 具體**見 p162

1 css權威指南;

2 mdn的 基本文字和字型樣式;

3 css 文字;

4 css 字型;

CSS字型和文字

字型是 文字的不同體式 或者 字的形體結構 對於英文而言,每種字型都是由一組具有獨特樣式的字母 數字和符號組成的。根據外觀,字型可以分為不同的類別 font collection 包括襯線字型 serif 無襯線字型 sans serif 和等寬字型 monospace 每一類字型可以分成不同的字型...

Css顏色和文字字型

顏色名表示,比如 red 紅色,gold 金色 16進製制數值表示,比如 ff0000 表示紅色,這種可以簡寫成 f00 rgb顏色 紅 r 綠 g 藍 b 三個顏色通道的變化 background color rgb 200,100,0 rgba顏色 紅 r 綠 g 藍 b 透明度 a backg...

CSS字型屬性和文字屬性

字型屬性 font size px 字型的大小 font weight 400 700 bold,表示加粗 400 lighter,不加粗 font family 字型 font style 字型為斜體或者正常字型字型的復合語法 選擇器文字屬性 color 文字顏色 text algin under...