網(wǎng)頁設(shè)計中使字體和圖片更好匹配的技巧

新聞 2023-08-31編輯：深圳網(wǎng)站建設(shè)閱讀（）標(biāo)簽： 網(wǎng)頁設(shè)計 匹配

深圳網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實力,PC+手機+微信+小程序
【模板網(wǎng)站的價格】國際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營銷系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營銷網(wǎng)站的效果】重長尾，重優(yōu)化，提權(quán)重，擴收錄，提排名
【量身訂制的設(shè)計】據(jù)據(jù)需求量身定制。設(shè)計到滿意為止
【專屬VIP的服務(wù)】24RX365 為您提供1對1的專屬VIP服務(wù)

　　有人說中文網(wǎng)頁的設(shè)計沒有字體設(shè)計，因為網(wǎng)頁可以使用的中文字體非常有限，只有粗體、宋體、微軟雅黑等?？梢允褂茫@給中文網(wǎng)頁的美感帶來了損失。相比英文對字體的考慮，網(wǎng)頁上的中文字體太隨意了。

　　當(dāng)然，這種說法在某種程度上是正確的，但我們應(yīng)該從另一個角度來看。中文網(wǎng)頁中的字體確實僅限于這些字體，但并不代表中文網(wǎng)頁沒有字體設(shè)計。

　　理解網(wǎng)頁設(shè)計中的“詞”

　　首先，我們簡單地將網(wǎng)頁中的文字劃分為可替換和不可替換的部分。

　　可替換詞是可以通過后臺管理進行編輯的詞，如博文、產(chǎn)品描述等。網(wǎng)頁制作過程中設(shè)置了不可替代的字符。后臺管理不為字符提供編輯條件，只能通過網(wǎng)頁代碼進行修改，如導(dǎo)航、Banner等。不可替換的文字完全不能修改，但是修改一次會花費一定的金額，所以修改間隔，比如導(dǎo)航修改，需要經(jīng)過代碼，Banner中文字的修改也需要重新設(shè)計Banner圖片。

　　備選字符只能使用網(wǎng)頁允許的給定字體，因此中文字體的選擇范圍較窄。然而，不可替代的字符可以通過圖片等來顯示。并制作成透明背景的圖片。這時字體的使用和排版都比較靈活，設(shè)計師會有足夠的創(chuàng)作自由。

　　下面設(shè)計使用的字體都有一定的設(shè)計，字體替換不是很容易。

　　這里所謂的帶圖搭配也是指這種可以設(shè)計的人物。

　　字形觀察

　　首先，字體是圖形，然后是承載信息的文本。因此，在選擇與圖片相匹配的字體時，需要重點考慮文字的形態(tài)特征是否與圖片相協(xié)調(diào)。

　　在選擇字體之前，首先要觀察圖片中的形態(tài)特征。如果插圖以插圖的形式呈現(xiàn)，那么插圖中的風(fēng)格細(xì)節(jié)，以及這種風(fēng)格所表達的時空氛圍感，都可以為你選擇與之搭配的字體提供依據(jù)。例如，英語中的無襯線通常更現(xiàn)代，而襯線則更古典。

　　下一頁的地圖是用曲線建模的。因此，匹配文本采用Adelle無襯線字體?？梢钥闯?，字體中的弧線處理與地圖中的曲線流建模相呼應(yīng)。

　　下面設(shè)計的圖紙是分散的矩形，所以對應(yīng)使用的字體是graphik，也顯示出非常清晰的幾何邊緣。

　　上述字形帶來的形態(tài)特征與圖片的匹配是使圖文完美匹配的途徑之一。此外，我們知道一些特殊的風(fēng)格化字體也可以表達出一種特殊的氛圍。

　　比如下圖中的機器在80年代看起來非常機械，這種造型也營造出了技術(shù)世界的懷舊感，所以像素文字最適合與此搭配。

　　從這些英文字體的圖形匹配的例子來看，我們需要觀察和解構(gòu)“形”的能力。同時，還需要對字體所承載的風(fēng)格特征進行分類。英語不僅要精挑細(xì)選，中文也要慎重考慮，而不是以期待遇到漂亮字體為目的進行設(shè)計，最后的結(jié)果是失敗。

　　字體也可以在原有字體的基礎(chǔ)上進行設(shè)計和“變形”，當(dāng)然不能頻繁改動。根據(jù)主題做一些“微調(diào)”，讓氣氛更加飽滿立體。

　　比如填充圓字母的空心部分，增加了一種可愛感，也非常兼容有圖片的角色形象。

　　字間距和行距

　　用你敏銳的設(shè)計師的眼睛觀察字形，區(qū)分不同字體的特點，是你選擇較大字體時需要的能力。所以非常適合第一張圖片，Banner等。其中文本需要顯示為圖片。我們的字體可以顯示在段落中。這時，形狀的特征逐漸淡化，我們更注重字與字之間的關(guān)系，即字間距。

　　一般來說，字距的選擇總是由字體本身及其與空間的關(guān)系決定的。字距較小時，傳達出緊湊感，而寬松的字距可以表達出輕松感。

　　比如大規(guī)模顯示字體之間的距離總是很近，因為字體本身已經(jīng)占據(jù)了足夠的空間，如果在字體之間增加更多的空間，整個空間就會被填滿。所以我們也可以說，字距是根據(jù)整個空間來調(diào)整確定的。同時畫面顯示更加集中，所有箭頭真的是“千夫所指”，字間距縮小，有輕微的集中感。

　　相對較小的字體略顯輕松閑適，與之相匹配的畫面也是一堆木頭，與木匠的自然舒適相聯(lián)系。

　　它也適用于漢語世界。但不同的是，中文字體之間的距離應(yīng)該更遠，以保持單一字體的獨特顯示。因為漢語中的每一個字都可以看作是具有一定意境的畫面，所以保持字距是漢語展示中保持美感的關(guān)鍵。

　　當(dāng)字體垂直顯示時，上下字距應(yīng)該加寬。這是因為我們?nèi)祟惖难劬τ谏舷马樞虻拈喿x習(xí)慣并不熟悉，如果字間距比較近，很容易形成字與字之間的視覺粘連。行距不同。檢查行距時，字體變成了段落，出現(xiàn)在一段中的字體就是段落。你應(yīng)該注意整個段落的灰度值。所謂灰度值就是字體的密度。

　　大行距，像大字距一樣，可以傳達緊湊和輕松的感覺。同時，行距還與字體的顏色、字距、字號和最終形狀有關(guān)。英文行距可以是標(biāo)準(zhǔn)比例尺的1.5倍，但是，所有規(guī)則都取決于條件。如果在特殊場合，仍然可以選擇更大或更小的行距進行顯示。

　　這一段的字體排列符合畫面?zhèn)鬟_的兒童教育成長的主題。字體圓潤，間距寬松，顯示出輕松的氛圍。字體本身采用與LOGO相同的顏色，比黑色字體更有意思。

　　附言

　　明確字體的字間距所創(chuàng)造的密度，行距會帶來段落的灰色幾何。配合字體本身的顯示形式，可以更好地選擇匹配的圖片。對字體有更多的了解，對不同風(fēng)格字體的形狀有一個大概的了解，這樣在使用的時候就不會到處瞎找合適的字體了。通常對于字體的積累是極其重要的。記得給自己打造一個字體，這樣在圖文匹配的時候就可以得心應(yīng)手了。

• 上一章：網(wǎng)站頁面設(shè)計怎樣才會得到訪客認(rèn)可
• 下一章：網(wǎng)站設(shè)計要注意事項