如何設(shè)計(jì)字體的大小以提高訪客的用戶體驗(yàn)?_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
現(xiàn)在國(guó)內(nèi)絕大多數(shù)的站點(diǎn)都用CSS把字體大小設(shè)定為12px,像素雖然也是相對(duì)尺寸單位,但只是相對(duì)于屏幕的分辨率 ,當(dāng)屏幕的分辨率一定時(shí),假如你感到字太小,閱讀有困難,在非標(biāo)準(zhǔn)瀏覽器中就無能為力了,所以說,假如把單位改成em,那么就可以用CTRL 鼠標(biāo)滾動(dòng)把字放大,或者用菜單上的查看>文字大小來改變字的大小。
1.在body標(biāo)簽里將字體尺寸設(shè)為62.5%,假如在body里沒有CSS設(shè)定,那么瀏覽器默認(rèn)的大小是16px,設(shè)了62.5%,則字體尺寸=16px*62.5%=10px,這時(shí)你能用em方便地設(shè)大小了,比如你需要用12px,只要設(shè)1.2em。
示例代碼 [www.hl5o.cn]
body{
font-size:62.5%;
}
h1{
fong-size:1.4em;/*h1字的大小相當(dāng)于14px*/
}
font-size:62.5%;
}
h1{
fong-size:1.4em;/*h1字的大小相當(dāng)于14px*/
}
2.body里字體尺寸設(shè)為75%,則字體尺寸=16px*75%=12px,1em相當(dāng)于12px.
示例代碼 [www.hl5o.cn]
body{
font-size:75%;
}
h1{
fong-size:1.5em;/*h1字的大小相當(dāng)于18px*/
}
font-size:75%;
}
h1{
fong-size:1.5em;/*h1字的大小相當(dāng)于18px*/
}
第一種方法更好些。假如是英文網(wǎng)站的話,還可以設(shè)定為small、x-small......當(dāng)然這樣一來,對(duì)頁(yè)面的設(shè)計(jì)要求會(huì)高一些。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- 運(yùn)用DIVCSS進(jìn)行網(wǎng)站構(gòu)架的一般流程參考
- 實(shí)現(xiàn)CSS網(wǎng)頁(yè)布局的簡(jiǎn)單原理
- 用CSS控制輸入框input樣式,懸停交互如何實(shí)現(xiàn)?
- 解決列高度自適應(yīng)的五種方法!
- DIVCSS網(wǎng)頁(yè)布局:HTML結(jié)構(gòu)化DIVCSS網(wǎng)頁(yè)布局入門指南
- WEB2.0標(biāo)準(zhǔn)教程:應(yīng)用WEB標(biāo)準(zhǔn)建設(shè)網(wǎng)站有什么好處?
- 容器高度1px在IE中達(dá)不到效果如何設(shè)置最小高度?
- 本人使用的頁(yè)面常用布局及樣式代碼
- 網(wǎng)站變黑灰色CSS濾鏡代碼
- 如何設(shè)計(jì)字體的大小以提高訪客的用戶體驗(yàn)?
猜你也喜歡看這些
- CSS圓角邊框純CSS制作
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- DIV CSS布局實(shí)例:半透明陰影效果的實(shí)現(xiàn)
- DivCSS布局實(shí)例:三行單列上下固定高度中間自適應(yīng)
- 用css網(wǎng)站布局之十步實(shí)錄!(一)
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- DIV CSS布局入門示例(三)頁(yè)面頂部制作
- CSS菜單:一個(gè)圖片構(gòu)建菜單的三種狀態(tài)一例!
- 一個(gè)無序列表UL鼠標(biāo)激活顯示背景色的實(shí)例
- DIVCSS布局實(shí)例:各種2欄3欄布局實(shí)例(附下載)
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-如何設(shè)計(jì)字體的大小以提高訪客的用戶體驗(yàn)?
。