整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
京網(wǎng)站建設(shè)公司在做網(wǎng)站過程中總會(huì)遇到這種情況：網(wǎng)站設(shè)計(jì)效果很贊，網(wǎng)站特效很棒，非常漂亮而且邏輯性很強(qiáng)，但往往在很多影響網(wǎng)站整體形象的細(xì)節(jié)方面做的很不理想，就比如像網(wǎng)站中的文字樣式和排版方式等都有可能影響網(wǎng)站整體形象！
網(wǎng)站中的文字放置的位置和文字大小、字體等對(duì)于網(wǎng)站整體表現(xiàn)來說至關(guān)重要！一般來說網(wǎng)站字體從美觀性和兼容性考慮來說，大多數(shù)網(wǎng)站盡量應(yīng)選擇像微軟雅黑等相對(duì)比較飽滿的字體，當(dāng)然在有字體使用版權(quán)的情況下可以使用一些更符合企業(yè)或產(chǎn)品特點(diǎn)的字體。這樣能提高網(wǎng)站整體質(zhì)量感和厚重感！
再一個(gè)就是網(wǎng)站文章內(nèi)容的排版和字體大小了，一般來說，網(wǎng)站內(nèi)容的字體排版是對(duì)網(wǎng)頁最重要的了！網(wǎng)站內(nèi)容大多數(shù)都是文字形式的體現(xiàn)，因此標(biāo)題大小、字體、文字排版形式等對(duì)頁面的美觀程度非常重要！
那么網(wǎng)站中文字字體、文字間距、文字大小和段落空格等如何設(shè)計(jì)定義和排版才能符合大多數(shù)人的需求呢？網(wǎng)站內(nèi)容文章是要居于網(wǎng)站左邊還是右邊？字體顏色如何設(shè)置呢？
網(wǎng)站建設(shè)過程中，一般情況下網(wǎng)站后臺(tái)對(duì)于內(nèi)容頁的設(shè)置會(huì)有專門的編輯框用于上傳內(nèi)容，而這個(gè)編輯框本身定義的段落分格形式和默認(rèn)字體等也一般是網(wǎng)站中一般被最多用到的！
很多人喜歡在編輯文章時(shí)跟在書本上的排版一樣每次分段都要空兩個(gè)字，但實(shí)際上因?yàn)榛ヂ?lián)網(wǎng)絡(luò)形式的頁面本身在空兩個(gè)字符之后的局促性仍然沒有辦法消除掉，相反還是很局促。同樣的，如果分段以空格的形式來表現(xiàn)，因?yàn)榫W(wǎng)絡(luò)空間本身只需要滾輪滑動(dòng)就可以有大量的位置，不會(huì)像書本一樣需要翻頁，因此空格來分段會(huì)顯得網(wǎng)站頁面更簡(jiǎn)潔大方！
而字體一般來說網(wǎng)站字體多用普通黑色字體，這樣能盡量的符合用戶習(xí)慣性的字體視覺，顯得比較可靠和專業(yè)。當(dāng)然還是要具體網(wǎng)站具體分析了。
小小的文字排版在網(wǎng)站建設(shè)中不過是一個(gè)小的不能再小的細(xì)節(jié)，可是，就是這樣的細(xì)節(jié)還有的網(wǎng)站做的不夠好，要知道網(wǎng)站上的每一個(gè)元素都將影響著用戶的瀏覽體驗(yàn)，一篇質(zhì)量上乘的文章因?yàn)榕虐娴膯栴}而讓用戶擦肩而過，或者一篇普通的文章可能因?yàn)槲淖峙虐娣嫌脩趔w驗(yàn)，而獲得用戶欣賞認(rèn)可都是極有可能的！
原文鏈接出自：http://www.bjjfsd.com/index_show_catid_19_id_634.html
于漢字的特殊性，在CSS網(wǎng)頁布局中，中文排版有別于英文排版。排版是一個(gè)麻煩的問題，作為一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)師和網(wǎng)頁制作人員，掌握一些簡(jiǎn)單的中文排版技巧是不可或缺的。所以今天小編特意整理了一些簡(jiǎn)單實(shí)用的技巧，希望對(duì)大家有所幫助。
字體
我們可以使用css樣式為網(wǎng)頁中的文字設(shè)置字體、字號(hào)、顏色等樣式屬性。
body{font-family:"宋體";}
這里注意不要設(shè)置不常用的字體，因?yàn)槿绻脩舯镜仉娔X上如果沒有安裝你設(shè)置的字體，就會(huì)顯示瀏覽器默認(rèn)的字體。（因?yàn)橛脩羰欠窨梢钥吹侥阍O(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體。）
現(xiàn)在一般網(wǎng)頁喜歡設(shè)置“微軟雅黑”，如下代碼：
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微軟雅黑";}
字號(hào)、顏色
可以使用下面代碼設(shè)置網(wǎng)頁中文字的字號(hào)為12像素，并把字體顏色設(shè)置為#666(灰色)：
body{font-size:12px;color:#666}
粗體
可以使用下面代碼實(shí)現(xiàn)設(shè)置文字以粗體樣式顯示出來。
p span{font-weight:bold;}
斜體
以下代碼可以實(shí)現(xiàn)文字以斜體樣式在瀏覽器中顯示：
p a{font-style:italic;}
<p>三年級(jí)時(shí)，我還是一個(gè)<a>膽小如鼠</a>的小女孩。</p>
下劃線
有些情況下想為文字設(shè)置為下劃線樣式，這樣可以在視覺上強(qiáng)調(diào)文字，可以使用下面代碼來實(shí)現(xiàn)：
p a{text-decoration:underline;}
<p>三年級(jí)時(shí)，我還是一個(gè)<a>膽小如鼠</a>的小女孩。</p>
刪除線
如果想在網(wǎng)頁上設(shè)置刪除線怎么辦，這個(gè)樣式在電商網(wǎng)站上常會(huì)見到：
上圖中的原價(jià)上的刪除線使用下面代碼就可以實(shí)現(xiàn)：
.oldPrice{text-decoration:line-through;}
縮進(jìn)
中文文字中的段前習(xí)慣空兩個(gè)文字的空白，這個(gè)特殊的樣式可以用下面代碼來實(shí)現(xiàn)：
p{text-indent:2em;}
注意：2em的意思就是文字的2倍大小
行間距（行高）
這一小節(jié)我們來學(xué)習(xí)一下另一個(gè)在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實(shí)現(xiàn)設(shè)置段落行間距為1.5倍。
p{line-height:1.5em;}
中文字間距、字母間距
如果想在網(wǎng)頁排版中設(shè)置文字間隔或者字母間隔就可以使用 letter-spacing 來實(shí)現(xiàn)，如下面代碼：
h1{
letter-spacing:50px;
}
注意：這個(gè)樣式使用在英文單詞時(shí)，是設(shè)置字母與字母之間的間距。
如果我想設(shè)置英文單詞之間的間距呢？可以使用 word-spacing 來實(shí)現(xiàn)。如下代碼：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
對(duì)齊
想為塊狀元素中的文本、圖片設(shè)置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實(shí)現(xiàn)文本居中顯示。
h1{
text-align:center;
}
<h1>了不起的蓋茨比</h1>
同樣可以設(shè)置居左：
h1{
text-align:left;
}
<h1>了不起的蓋茨比</h1>
還可以設(shè)置居右：
h1{
text-align:right;
}
<h1>了不起的蓋茨比</h1>
圖文環(huán)繞
在css中有一個(gè)常見的圖文環(huán)繞效果。實(shí)現(xiàn)方式主要是通過float標(biāo)簽，將圖片左浮動(dòng)，或者右浮動(dòng)。其相鄰的文字，就會(huì)環(huán)繞圖片排列，代碼和效果如下：
豎排文字
使用writing-mode實(shí)現(xiàn)。writing-mode屬性有兩個(gè)值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是上-下、右-左。
比如：
p{
writing-mode: tb-rl;
}
可以結(jié)合direction排版。
首字下沉
偽對(duì)象:first-letter配合font-size、float可以制作首字下沉效果。
比如：
p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}
漢字注音
如果我們想為漢字注音，就可以使用ruby標(biāo)簽和ruby-align屬性來實(shí)現(xiàn)，比如：
<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然后通過ruby-align設(shè)置其對(duì)齊方式。
這是一個(gè)比較冷門的技巧，可能平時(shí)使用不多，但小編覺得不妨提供給大家預(yù)防不時(shí)之需。
以上就是小編要跟大家分享的CSS網(wǎng)頁布局中文排版技巧，雖然很簡(jiǎn)單，但簡(jiǎn)單的過程中其實(shí)暗藏玄機(jī)，如果大家喜歡還請(qǐng)記得收藏哦~
家好，今天我們一起來探討一下Banner的設(shè)計(jì)，在這一次的教程中我會(huì)介紹一些平時(shí)總結(jié)下來的可以讓banner迅速達(dá)成效果的簡(jiǎn)單小竅門，如果你在平時(shí)有大量的banner設(shè)計(jì)工作，并且總覺得時(shí)間不夠用，那么希望本次的教程可以幫助到你。
好了，那么我們進(jìn)入正題。
首先讓我們認(rèn)識(shí)一下banner，平時(shí)大家在各種網(wǎng)站或者移動(dòng)端的app里經(jīng)常可以見到，印象里他們大都長(zhǎng)這個(gè)樣子：
當(dāng)然了，這就是我們常說的banner，但其實(shí)banner還有幾個(gè)遠(yuǎn)房表兄、同父異母什么的兄弟姐妹們，它們可能長(zhǎng)這個(gè)樣子：
恩……其實(shí)以上這些在廣義上來說都可以歸納為Banner，就形狀來說現(xiàn)在的banner也已經(jīng)不再局限于從前大家所理解和看到的那些出現(xiàn)在固定廣告位的長(zhǎng)條形廣告了，他可以是長(zhǎng)的、方的、必要的時(shí)候也可以是其他什么亂七八糟的形狀，總之，不管是側(cè)邊欄廣告、焦點(diǎn)圖、專題頁的頭圖、我們都可以理解為是banner，在設(shè)計(jì)方法上，其實(shí)都是共通的。
如果要是分類的話其實(shí)可以大概分為兩類：
1.“促使點(diǎn)擊”
2.“渲染氣氛”
第一種就是大家經(jīng)常在各種大大小小的網(wǎng)站都能看到的廣告banner或者焦點(diǎn)圖，她們有大有小可長(zhǎng)可短，但是他們共同的作用就是通過各種方式引導(dǎo)你去點(diǎn)擊。
通常你在做這種類型的banner時(shí)，一般會(huì)是上圖這個(gè)場(chǎng)面。
第二種大家通常可以在各種游戲網(wǎng)站，房地產(chǎn)網(wǎng)站，各種活動(dòng)專題頁中見到，也就是大家常說的頭圖，這種類型的banner通常并不是引導(dǎo)用戶去觸發(fā)點(diǎn)擊，而是服務(wù)于內(nèi)容，為整個(gè)頁面做好氣氛的渲染。
通常你在做這種類型的banner時(shí)，一般會(huì)是上圖這個(gè)場(chǎng)面
說這么多，其實(shí)我是希望通過這種介紹和分類方式，讓大家在拿到設(shè)計(jì)需求時(shí)可以確定一個(gè)正確的設(shè)計(jì)方向，降低設(shè)計(jì)成本，從而提高工作效率。
下面我們介紹幾個(gè)設(shè)計(jì)小竅門，也許通過這些方法可以讓你在最短的時(shí)間內(nèi)有效的達(dá)成效果。
首先我們來說一下字體和字形，大家都知道我們從圖形上解讀信息的能力是要大于單純的閱讀文字，但是在banner的設(shè)計(jì)中，大多數(shù)情況下我們都是通過文字來了解信息，圖片只是起到一個(gè)襯托的作用，在我自己平時(shí)做banner的時(shí)間分配里對(duì)字形的處理可能要占到百分之五十甚至更多的時(shí)間，所以今天我們重點(diǎn)來說一下這方面的處理技巧。
1.鋼筆造字
鋼筆造字是在做字形設(shè)計(jì)上一個(gè)比較討巧的方法，但卻又十分有效。對(duì)平時(shí)沒有太多字形設(shè)計(jì)經(jīng)驗(yàn)的同學(xué)來說非常適合的，只要你了解基本的字形設(shè)計(jì)規(guī)律（筆畫的粗細(xì)，字體的重心等），那么此方法可以讓你快速的讓banner高大上起來，具體的設(shè)計(jì)方法大家可以移步字形設(shè)計(jì)大師@劉兵克老濕的設(shè)計(jì)教程：http://v.youku.com/v_show/id_XNDI4MDMwMTg4.html
2.筆畫鏈接
當(dāng)你沒有時(shí)間完整的設(shè)計(jì)banner上字體的字形時(shí)，筆畫鏈接未嘗不是一種好的方法，在做筆畫鏈接時(shí)只有合理的安排需要鏈接的筆畫，做到不突兀，不影響易讀性，那么都會(huì)出來一個(gè)比較好的視覺效果，在做筆畫連接的時(shí)候我推薦大家使用一些筆畫粗細(xì)比較統(tǒng)一的非襯線字體比方說雅黑、悅黑、幼圓等等。
3. 隨“意”變形
顧名思義就是根據(jù)文字的具體含義來設(shè)計(jì)字形的一種方法，當(dāng)上面介紹的兩種技巧都讓你感覺頭大的時(shí)候不妨試試這種處理技巧，你只需要腦洞大開，了解文字的具體含義并用相應(yīng)的圖形在文字上加以體現(xiàn)就可以了，就醬簡(jiǎn)單！
4. 3D
如果要在banner中想突出文字，把文字做成3D效果可謂是最“粗暴”的一種解決方法，只要處理方法得當(dāng)也可以達(dá)到很好的效果，如何處理3D這種細(xì)節(jié)問題這里就不提及了，網(wǎng)上有大堆大堆的教程可供參考。切記，處理3D文字的時(shí)配色是關(guān)鍵，稍不注意就會(huì)顯得山寨和俗氣。
好了，以上是一些在設(shè)計(jì)banner時(shí)可以用到的字形設(shè)計(jì)技巧，可能有童鞋要說我平時(shí)banner的設(shè)計(jì)工作很繁重，時(shí)間也很緊張，沒有精力去做字形，或者由于版權(quán)的問題，在大多數(shù)情況下不得不使用那么幾種字體，像這樣的情況有沒有好的辦法讓banner中的文字出效果呢。答案當(dāng)然是有啦，下面就給大家介紹幾個(gè)方法。看看如何在使用簡(jiǎn)單的默認(rèn)字體的同時(shí)打破字體的沉默。
字體如何打破沉默——不破不立
看到?jīng)]有，同樣是簡(jiǎn)單的字體，只是打破了整段的文字，做單個(gè)字體的傾斜，整體看起來就活潑跳動(dòng)了很多，或者可以做單個(gè)字體的疊加，凹凸效果同樣可以讓簡(jiǎn)單的默認(rèn)字體變得跳躍起來。
如何打破字體的沉默——空間獨(dú)立
說起這種方法我們就不得不提到banner中的空間關(guān)系，在設(shè)計(jì)banner時(shí)通常我們?nèi)绻覀兿胪怀鑫淖郑敲淳鸵刮淖趾捅尘袄_空間，而為文字做一個(gè)簡(jiǎn)單的純色底色不可謂不是一個(gè)省事的辦法。
如何打破字體的沉默——斜能壓正
文字必須橫平豎直才是最好看的嘛？當(dāng)然不是，在一些設(shè)計(jì)中一個(gè)傾斜的文字排版不僅可以打破默認(rèn)字體的沉默還可以幫助整個(gè)畫面的構(gòu)圖，真是百試不爽。
如何打破字體的沉默——長(zhǎng)短粗細(xì)變換自如
通常我們?cè)谧鲆欢挝淖值呐虐鏁r(shí)，經(jīng)常會(huì)根據(jù)段落中的關(guān)鍵字做相印的加粗或者高亮，這種方法看似簡(jiǎn)單，但是在實(shí)際操作的過程中稍有不當(dāng)就會(huì)導(dǎo)致整段字體看起來凌亂不堪，其實(shí)只要設(shè)計(jì)的時(shí)候把文字看作圖形，注意整個(gè)字體排版的走向是否有規(guī)律可循就容易很多。
OK，以上就是今天為大家總結(jié)的一些字形與字體的處理方法，希望對(duì)大家有所啟發(fā)，在banenr的設(shè)計(jì)中還有很多種有效的技巧可以用到，如果你有什么特別的技巧也可以告訴我們。
作者：LipengBian 轉(zhuǎn)自/uec.nq
更多視頻教程學(xué)習(xí)請(qǐng)關(guān)注:視覺設(shè)計(jì)聯(lián)盟公眾號(hào)：shijueshejilianmeng，回復(fù)“教程”
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
