古典的英文 深入解析CSS字體樣式設置：字體類型、粗細與大小的全面指南
更新時間：2024-12-01 17:31:00作者：佚名
字體樣式一般具有以下特點：
字體類型（樣式）、字體粗細、字體大小、字體系列
(1) 字體類型(style) font-style
用于設置字體樣式，可以設置以下值：
①normal：普通字體
②斜體：斜體
③oblique：斜字體
(2)字體粗細font-weight
用于設置字體粗細，可以設置以下值：
①normal：正常厚度
②粗體：粗體
③bolder：字體加粗
④lighter：字體變細
⑤100~900：步長為100，
400相當于正常，700相當于粗體
(3)字體大小font-size
用于設置字體大小，可以設置任意正整數和浮點數
默認情況下，幾乎所有瀏覽器的默認字體大小都是16px。而Chrome等主流瀏覽器不支持12像素以下的字體。
(4)字體家族font-family
用于設置字體系列古典的英文，也就是我們通常所說的“使用的字體”。
設置字體有以下規則：
1、使用中文字體或帶空格的英文字體名稱時，需要將字體名稱用“引號”括起來
2. 單字字體名稱不需要用引號引起來。
3.“font-family”可以有多個值。多值設置的目的是當瀏覽用戶的本地計算機沒有找到第一個設置值所代表的字體時，就會尋找第二個，以此類推。 ，如果沒有找到最后一個值的匹配字體，瀏覽器將使用自己的默認字體。
4、考慮到網頁在不同設備上最終顯示效果的一致性，我們通常使用的中文字體只有：“宋體”、“微軟雅黑”、“黑體”、“凱體”、“優源” ”等，而目前“微軟雅黑”是最常用的設計字體。
5、常用英文字體有：“Arial”、“Helvetica”、“Tahoma”、“Verdana”、“Lucida Grande”、“Times New Roman”、“Georgia”等。
2. 組合值的寫法
(1)賦予所有屬性
我們可以組合“font”的多個值來書寫，比如我們要設置一個
樣式為正常、粗體、20像素大小、“微軟雅黑”
和
樣式為斜體，正常粗細，字體大小為22像素，“宋體”
我們可以這樣寫：
CSS代碼
(2) 省略字體類型或字體樣式之一，或兩者
1、因此，在寫入“font”屬性的組合值時，可以省略兩者之一，用識別的值來設置。另一個自動為“正常”。
2.你甚至可以省略前兩個值，只保留“font-size”和“font-family”
即：style和weight可以給其中之一，也可以兩者都給，也可以都不給，順序也可以改變，但必須在前兩者。
喜歡：
CSS代碼
注意：
在“font”組合值的寫法中，只有“font-size”和“font-family”兩個值不能省略，兩者缺一不可。順序必須先是尺寸，然后是系列，不能更改，否則瀏覽服務器將無法識別該值，并會報告該組合值的錯誤。
(3) 設置字體中的文本行高
除了上面提到的“font”屬性組合值的寫法之外，還有一種不太常見但更實用的寫法，就是直接設置文本中的行高“line-height” “字體”屬性。 ，如下：
3.擴展名：字體單位px、em、rem【必須掌握】
①px（像素，相對于顯示器屏幕分辨率）
②em（相對于當前元素中文字的字體大小，會繼承父元素的大小）
③rem（相對于HTML根元素，最常用的單位）
PX
1. 像素px是相對于顯示器屏幕分辨率而言的。
2.PX特點
?1. IE無法調整以px為單位的字體大小；
?2.大多數國外網站之所以可以調整，是因為他們使用em或rem作為字體單位；
?3. Firefox 可以調整 px、em、rem。大多數中國網民使用IE瀏覽器（或內核）。
3. 當你放大一張圖片時，你會看到許多小矩形，這些就是像素。
EM
4.em是相對長度單位。相對于當前標簽中 font-size 的大小。
5. 如果當前標簽的字體大小沒有手動設置，則當前標簽中的font-size將繼承父標簽的字體大小。
[如果父標簽沒有設置大小，那么會找到繼承的頂點->瀏覽器默認的16px字體大小。因此，默認是16px==1em]
6. 如果設置，則會根據設置的font-size。
7.在主流瀏覽器中，字體大小不能小于12px（寬度和高度可以小于12px）。如果字體大小小于12px，則會強制為12px。
你好啊
你好啊
你好啊
你好啊
8.EM特點
?em 的值不固定；
?em 將繼承父元素的字體大小。
快速眼動睡眠
Rem是CSS3中一個新的相對單位（root em，root em），引起了廣泛的關注。
9. rem為元素設置字體大小時，仍然是相對大小，但只是相對于HTML根元素。
這個單位可以說結合了相對尺寸和絕對尺寸的優點。通過它，只需修改根元素就可以按比例調整所有字體大小，并且可以避免逐層復合字體大小的連鎖反應。
10.rem單位兼容性問題
目前，除IE8及更早版本之外的所有瀏覽器都支持rem。
對于不支持的瀏覽器，解決辦法很簡單，就是額外寫一條絕對單位語句。這些瀏覽器忽略用 rem 設置的字體大小。這是一個例子：
p {字體大小：14px;字體大小：.875rem;}
注意：
選擇使用哪種字體單位主要由您的項目決定。如果您的用戶群使用最新版本的瀏覽器，建議使用 rem。如果要考慮兼容性，就使用px，或者同時使用兩者。
11.px和rem選擇？
① 對于只需要適配少量移動設備且分辨率對頁面影響不大的，使用px。
② 如果需要適配各種移動設備，使用rem。例如，只需適配iPhone、iPad等分辨率差異較大的設備即可。
4.擴展：css3尺寸單位vw、vh、vmin、vmax【必須了解】
①基本概念
我們先來了解一個術語：窗口
視口是你的瀏覽器實際顯示內容的區域，即網頁不包括工具欄和任務欄的可見區域的大小。
那么，vw、vh、vmin、vmax就是窗口單位，也是相對單位。它與頁面的父節點或根節點無關。它由視口的大小決定。該值為數字n，表示它占據視口大小的n%。
②詳細說明
vw：窗口寬度的百分比（1vw代表窗口寬度的1%）
vh：窗口高度的百分比（1vh代表窗口高度的1%）
vmin：當前vw和vh中較小的一個
vmax：當前vw和vh之間的較大值
③代碼示例
文檔
/* 每個div的大小為視覺高度的20% /
div {
邊框：1px 純紅色；
高度：20vh；
/ div為視圖寬度的40%，字體大小為視圖寬度的1% /
.演示{
寬度：40vw；
字體大小：1vw；
背景顏色：#50688B；
顏色：#FFF；
/ div為視圖寬度的50%，字體大小為視圖寬度的2% /
.demo1 {
寬度：50vw；
字體大小：2vw；
背景顏色: rgb(53, 108, 190);
顏色: RGB(170, 111, 111);
/ div為視圖寬度的60%貝語網校，字體大小為視圖寬度的3% /
.demo2 {
寬度：60vw；
字體大小：3vw；
背景顏色：#644bd3；
顏色：rgb(54,41,41)；
/ div為視圖寬度的70%，字體大小為視圖寬度的4% */
.demo3 {
寬度：70vw；
字體大小：4vw；
背景顏色：#ff006e；
顏色：#FFF；
所有div的高度為20vw，即視圖寬度的20%
div為40vw，即視覺寬度的40%，字體大小為1vw，即視覺寬度的1%。
div為50vw，即視覺寬度的50%，字體大小為2vw，即視覺寬度的2%。
div為60vw，即視覺寬度的60%，字體大小為3vw，即視覺寬度的3%。
div為60vw，即視覺寬度的70%，字體大小為4vw，即視覺寬度的4%。
````
④vw、vh和%百分比的區別
(1)%是相對于父元素大小設置的比例，vw和vh由窗口大小決定。
（2）vw和vh的優點是可以直接獲取高度，而使用%在不設置body高度的情況下無法正確獲取可見區域的高度，所以這是一個很好的優點。
⑤vmin和vmax的使用
開發移動頁面時，如果使用vw和wh設置字體大小（如5vw），則縱向和橫向模式顯示的字體大小會不同。
由于vmin和vmax是當前較小的vw和vh以及當前較大的vw和vh。這里可以使用vmin和vmax。使文本大小在水平和垂直屏幕上保持一致。
⑥瀏覽器兼容性
(1) 臺式電腦
Chrome：自版本 26（2013 年 2 月）起完全支持
Firefox：自版本 19（2013 年 1 月）起得到完美支持
Safari：自 6.1 版（2013 年 10 月）起完全支持
Opera：自版本 15（2013 年 7 月）起得到完美支持
IE：自IE10（包括Edge）起僅部分支持（不支持vmax，vm取代vmin）
(2) 移動設備
Android：自 4.4 版（2013 年 12 月）起完全支持
iOS：自iOS8（2014年9月）起完美支持
5.擴展：解決復選框無法與旁邊文字對齊的問題
解決方案：
設置輸入垂直對齊：-6px；
.讀取輸入{
垂直對齊：-6px；
6、擴展：兩個原本對齊的內聯div，其中一個添加內容后無法對齊。
解決方案：
方法一：設置div超出文字的內容自動隱藏。
方法二：給div設置vertical-align：top； （有時也可以使用top）
5. CSS文字樣式設置
當很多單詞組合在一起形成文本時，現在我們正在研究如何設計這些文本的樣式。
1.文字的顏色“顏色”
在當前的瀏覽器標準中，更改瀏覽器默認字體顏色（#000000）的唯一方法是通過CSS“color”屬性進行設置。顏色。
color屬性可以設置4種值
①彩色英語單詞
可以通過color的英文單詞直接設置文本的顏色，如
“紅色”、“橙色”、“黃色”、“綠色”、“青色”、“藍色”、“紫色”、“粉色”、“灰色”、“黑色”和“白色”
ETC。
②HEX（三基色，十六進制表示）
使用“#”+十六進制表示顏色。
有“#”+“三位數”和“#”+“六位數”。
如果是“三位數”的形式，第一位數字代表“紅色”，第二位數字代表“綠色”，第三位數字代表“藍色”，通過取值范圍“0-9”，“af” (10-16)諸如“#26f”這樣的組合總共可以表達4,096種顏色。
如果是“六位數字”的形式，則可以表示的顏色數量更加詳細，第一、第二位數字代表“紅色”，第三、第四位數字代表“綠色”，第四、第五位數字代表“綠色”。代表“藍色”，也可以通過取值范圍“0-9”和“af”的組合，例如“#2369fd”，總共可以表達16,777,216種【超過1600萬】種顏色。
③RGBa（三基色，十進制表示）
就像“HEX”代表三基色一樣，該模式也是使用三基色的值來表達顏色，但“RGBa”顏色模式使用十進制值。
格式如“rgb(34, 102, 255)”，值之間用英文逗號“,”分隔。第一個值代表“紅色”，第二個值代表“綠色”，第三個值代表“藍色”，每個值的范圍是“0-255”（256個顏色級別），也可以代表16,777,216[更多超過 1600 萬種]顏色。
另外，該模式還支持不透明度的設置，即“RGBa”中的“a”（alpha），代表不透明度，取值范圍是“0到1”之間的浮點數（可以四舍五入為兩位小數），
“0”表示完全透明，“1”表示完全不透明，寫法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255）”。
④HSLa（色調、飽和度、亮度、不透明度）
該模式由
“色調”，
“飽和”，
“亮度”
“不透明度”（阿爾法）
為了表達顏色，不透明度的表示與“RGBa”相同。我們主要看以下三個值的含義：
1) 色調
除去“黑”和“白”從純紅到純藍再到純紅的色軸范圍，總共有360種色調；
2）飽和度
從這個色相的純黑到這個色相的純色，越接近黑色，飽和度越低；越接近純色，飽和度越高；
3）亮度
表示從“純黑”到“純白”的過程，越接近黑色，亮度越低，越接近白色，亮度越高。
4) 示例
HSL(76, 35%, 45%)：這是一種色相為76、飽和度為35%、亮度為45%、不透明的顏色。
HSLa(316, 75%, 56%, 0.9)：這是色調為 316、飽和度為 75%、亮度為 56%、不透明度為 0.9 的顏色
⑤透明（透明）
只要設置了這個值，文本內容就會變得完全透明，也就是說，無論背景是什么顏色或者圖片，設置的文本元素都完全不可見。除非選擇文本，否則它僅用作占位符，如下例所示：
div { 顏色：透明；}
需要補充的是，“IE 8”及以下版本瀏覽器不支持“RGBa”、“HSLa”模式和“Transparent”值，即不支持透明度部分的值，而常規的“RGB”和“HSL”模式仍然可以正常支持。
2. 文本居中方法“text-align”
該屬性用于控制“行內元素”（文本元素）在“行內塊元素”或“塊元素”內的居中方式，包含三個值：
左（默認）
文本左對齊
中心
將文本居中對齊
正確的
文本右對齊
3. 使用“text-indent”縮進段落的第一行
該屬性用于設置每段首行的縮進量。
如果用于中文布局，一般會用“2em”的值和單位來縮進每段首行“兩個字符”。
p {
文本縮進：2em；
4. 文字裝飾行“text-decoration”
此屬性向文本添加裝飾線。具有“href”屬性的標簽默認會有下劃線，這是由該屬性的值“underline”設置的。
“text-decoration”屬性具有以下值：
無（默認）
不顯露任何裝飾線
強調
在文本下方顯示裝飾線
上劃線
在文本上方顯示裝飾線
直通
在文本中間顯示裝飾線，相當于刪除線
p {
文本裝飾：無；
5. 使用“text-transform”將英文字母從大寫轉換為小寫
該屬性可以將“行內元素”中的英文文本轉換為大寫和小寫，以滿足網站的規范要求。
尤其是在一些對項目產品細節有嚴格要求的跨國企業或合資企業，
他們對網站或應用程序中的文本格式也有非常高的要求。
當網站上的大部分英文文本都是從其他地方編譯粘貼過來的時候，如果需要對這些文本進行一一修改，不僅時間成本會大大增加，而且很容易出現一些很難發現的遺漏。 。這時候，“text-transform”屬性就有了它的“用處”。
該屬性具有以下屬性值：
無（默認）
保持文本中英文單詞的默認大小寫
大寫
將每個英文單詞的第一個字母改為大寫字母（不管原來是大寫還是小寫），不管其他字母，哪怕是小寫。
大寫
將所有英文單詞轉換為大寫字母
小寫
將所有英文單詞轉換為小寫字母
p {
文本轉換：大寫；
6. 文本陰影“text-shadow”
該屬性的目的是為文本添加陰影效果。
該屬性最初在CSS2.0中定義，但在CSS 2.1中被刪除。不知道什么原因，但在CSS3.0中被重新寫入規范。
目前，除IE9及之前版本不支持該屬性外，其他主流瀏覽器均支持該屬性。
p {
文本陰影：0px 0px 2px 黑色；
該屬性有4個值，如下：
水平陰影偏移（h-shadow）
“0”表示保持原來位置，正數表示向右移動，負數表示向左移動。單位是像素“px”。
垂直陰影偏移（v-shadow）
“0”表示保持原位置，正數表示向上移動，負數表示向下移動。單位是像素“px”。
陰影模糊距離（模糊）
使用正數來表示陰影模糊的單位距離。距離越大，模糊程度越高。單位是像素“px”。
陰影的顏色（顏色）
支持Web技術中常用的顏色模式：“Color English Word”、“HEX”、“RGBa”、“HSLa”。
與“內聯塊元素”和“塊元素”中使用的“box-shadow”（后面會學習）不同，文本陰影的屬性值沒有“inset”（設置為內陰影）和“傳播”（陰影）。擴展名古典的英文，單位像素“px”），以后使用時需要區分。
7.段落文本行高“line-height”
該屬性用于設置一行內“行內元素”中文本元素的高度（可以達到單行文本垂直居中的效果）
使用場景如：表格、導航按鈕、自定義樣式按鈕、標題欄等。
數值描述
正常默認。它會自動設置合理的行間距。
number 設置表示字體大小倍數的數字。
length 設置固定的行距。
% 基于當前字體大小的百分比行距。默認為 100%
繼承指定line-height屬性的值應該從父元素繼承。
8. 字間距
該屬性用于設置英文單詞之間的間距。
注意
他在區分單詞時，會判斷單詞兩邊是否有空格。所以如果你的內容是中文的
1. 當文本之間沒有空格時，整個文本將被視為一個單詞。
2. 當每個漢字兩邊有空格時，每個漢字將被視為一個詞。
3.它的值可以為負數，距離會減小。
p {
字間距：1em；
9. 字符間距“letter-spacing”
與“word-spacing”不同，該屬性用于控制字符之間的間距。
一個字母、一個漢字、甚至一個空格都是一個字符。
注意：
1、html中，多個空格最終會變成一個空格。
2.它的值可以為負數，距離會減小。
10.空間包裹處理“空白”
該屬性設置如何處理元素內的空格和換行符。主要有以下幾個值：
正常（默認）
空格和換行符由瀏覽器處理
前
段落中的所有空格和換行符都將被保留（類似于
標簽）
nowrap
段落內的文本不會換行（類似于沒有設置過換行的“notepad”）
pre-wrap
段落里所有的空格符序列和換行符序列都會被保留，這點類似于pre
但是他不會去更改瀏覽器的默認行為（當內容的寬度小于了窗體的寬度時會出現滾動條的行為）
pre-line
保留換行符，但是多個空格還是會按照瀏覽器的默認行為處理（多個合并為一個）
注意：
如果你當前的內容是一系列沒有空格分隔的英文單詞，那么它會被瀏覽器視為一個單詞，并且不允許換行，只會出現水平滾動條來適應它。
11.設置文字方向“direction”
該屬性用于控制文本的顯示方向，即從左到右，或者從右到左。
在一些國家，如“阿拉伯”、“伊朗”、“以色列”，以及古典的“中日韓”文本等，其文本顯示方向是從右到左。為了適應這些文本的方向，如果手動設置要求，會太費時間，而且容易出錯。這時，“方向”屬性就會幫助你克服這個問題。該屬性有兩個值：
左轉
默認值，文本方向從左到右
回程
文字方向從右到左
相關文章
為您推薦
加載中...