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