技術(shù)資訊
中文Web設(shè)計(jì)中的著重號(hào)
2009-04-07 08:31:00
標(biāo)記em用來(lái)表示強(qiáng)調(diào),其默認(rèn)樣式為斜體。由于一些原因,中文斜體顯示效果并不理想,因此對(duì)中文直接應(yīng)用em標(biāo)記存在不妥之處。一些設(shè)計(jì)師使用加粗表示強(qiáng)調(diào),中英文顯示效果都不錯(cuò)。不妨插一句,小字號(hào)(如12px)的加粗文本在使用點(diǎn)陣字體的情況下與普通文本差異明顯,在使用矢量字體時(shí)則可能與普通文本差異不明顯。這些設(shè)計(jì)師甚至使用strong代替em。配合標(biāo)記默認(rèn)樣式?jīng)Q定標(biāo)記之選擇的做法必不可取。我們有理由為標(biāo)記定制樣式,替換其默認(rèn)樣式。
正式的中文排版中,強(qiáng)調(diào)往往是通過在文字下文打上實(shí)心圓點(diǎn)實(shí)現(xiàn)的,這樣的圓點(diǎn)被稱作著重號(hào)。在中文Web設(shè)計(jì)中,我推薦對(duì)em標(biāo)記使用著重號(hào)的效果,strong標(biāo)記仍保留對(duì)文本加粗的效果。
由于漢字的寬度一定,這種效果不難實(shí)現(xiàn)。這里打算為12px大小的文章正文設(shè)置em標(biāo)記樣式。首先,制作一張12px寬的圖片,下圖是放大至16倍的效果。
對(duì)12px大小的文字來(lái)說(shuō),將圓點(diǎn)直徑設(shè)為3px看起來(lái)最為合適,雖然這樣圓點(diǎn)的中心不可能處于絕對(duì)居中的位置(本圖中圓點(diǎn)偏右)。此外,將圓點(diǎn)以外的部分設(shè)為透明將更具適應(yīng)性。原圖:。
接著制定樣式。
.post p em {
padding-bottom:4px;
font-style:normal;
background:transparent url(images/dot-accent.gif) repeat-x left bottom;
}
為了保證效果,段落文本應(yīng)具有1.5em以上的行距,否則著重號(hào)可能距離下面一行文字太近。
下面是一段HTML代碼及其對(duì)應(yīng)的樣式效果。
<p>事業(yè)是<em>干</em>出來(lái)的,不是<em>吹</em>出來(lái)的。</p>
事業(yè)是干出來(lái)的,不是吹出來(lái)的。
原文:http://weakow.com/articles/dot-accent-in-web-design-in-chinese/
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁(yè)面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2009-02-20 11:18:00] Web設(shè)計(jì)之道
- [2009-04-07 08:22:00] 寬屏幕下的Web設(shè)計(jì)
- [2018-01-05 10:43:22] 《響應(yīng)式Web設(shè)計(jì):HTML5和CSS3實(shí)踐指南》——1.2節(jié)基于寬度百分比的圖像縮放
- [2008-12-18 21:56:00] 關(guān)于“>>”和“<<”、箭頭的交互
- [2009-03-23 09:29:00] 面向Web開發(fā)者和設(shè)計(jì)者的參考手冊(cè)
- [2019-08-15 10:12:31] 從零開始的響應(yīng)式web設(shè)計(jì)
- [2012-03-08 17:20:37] 優(yōu)秀Web設(shè)計(jì)的10項(xiàng)原則:富有美感并創(chuàng)新實(shí)用
- [2009-04-19 08:46:00] web專題設(shè)計(jì)模板化可行性研究
- [2009-02-20 11:17:00] Web設(shè)計(jì)中的黃金分割
- [2014-11-22 10:36:53] WEB設(shè)計(jì)的趨勢(shì):聚焦簡(jiǎn)潔強(qiáng)調(diào)字體
- [2009-02-20 13:46:00] Web設(shè)計(jì)中9個(gè)常見的可用性錯(cuò)誤[譯]
- [2008-12-31 08:46:00] Web設(shè)計(jì)中的黃金分割
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
IT資訊 審美 版面布局 GOOGLE 企業(yè)網(wǎng)站設(shè)計(jì) H5專題頁(yè)面 青島網(wǎng)站建設(shè) 青島網(wǎng)絡(luò)公司 SEO優(yōu)化 手機(jī)端的網(wǎng)站 網(wǎng)站推廣 青島網(wǎng)站SEO 圖形網(wǎng)格 H5定制設(shè)計(jì) 平面設(shè)計(jì) 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 網(wǎng)站建設(shè)的步驟有哪些 網(wǎng)站改版 微官網(wǎng)帶來(lái)的好處 html和css 營(yíng)銷策略 青島網(wǎng)站營(yíng)銷 外貿(mào)網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 微信營(yíng)銷的優(yōu)勢(shì) 空白和簡(jiǎn)潔的設(shè)計(jì) 手機(jī)網(wǎng)站建設(shè) 青島輪胎網(wǎng)站設(shè)計(jì) 青島網(wǎng)站設(shè)計(jì)哪家好 高端輪胎網(wǎng)站設(shè)計(jì)