网页设计中使字体和图片更好匹配的技巧

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： 网页设计 匹配

深圳网站建设公【gōng】司 帮助企业【yè】提升网站形象,彰【zhāng】显公司实力,PC+手【shǒu】机+微信+小程【chéng】序【xù】
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务】24RX365 为您【nín】提供1对1的专【zhuān】属VIP服务

　　有人【rén】说中文【wén】网页的设计没【méi】有字体设计，因为【wéi】网页【yè】可以使用的中文【wén】字体非常【cháng】有限【xiàn】，只有粗体、宋【sòng】体、微软【ruǎn】雅【yǎ】黑等。可以使用，这给中文网【wǎng】页的美感带来了损失【shī】。相比英【yīng】文对字体的考虑，网页上的中文字【zì】体太【tài】随【suí】意了。

　　当然，这种说法在某种【zhǒng】程度上【shàng】是正【zhèng】确的，但我【wǒ】们应【yīng】该从另一个角度来看。中【zhōng】文网页中的【de】字【zì】体确【què】实仅限于这些字体，但【dàn】并不【bú】代表中文网页没有【yǒu】字体设计。

　　理解网页设计中的“词”

　　首先【xiān】，我们简【jiǎn】单地将网页中的文字划分【fèn】为可替换和不【bú】可替【tì】换的部分。

　　可【kě】替换词是【shì】可以通过后台管理进【jìn】行编辑的词，如【rú】博文、产品描述等。网【wǎng】页制作过程中【zhōng】设置了不可替【tì】代的字符。后台【tái】管【guǎn】理不为【wéi】字符提【tí】供【gòng】编辑条件，只能【néng】通过网页【yè】代【dài】码进行修改，如【rú】导航、Banner等。不【bú】可替换的【de】文字完全【quán】不【bú】能修改，但是修改一次会花费一定的金额，所以修改间隔，比如导航修改，需要【yào】经过【guò】代码，Banner中文字的修改【gǎi】也需要重新【xīn】设计Banner图片【piàn】。

　　备选字【zì】符只【zhī】能使用网页允许的给定【dìng】字体，因此中文【wén】字【zì】体的选择范围较窄。然而【ér】，不【bú】可【kě】替代的字【zì】符可以通过图【tú】片等来显示。并制作成透明背景的图【tú】片。这【zhè】时字体的使【shǐ】用和排版都比较灵活，设计师【shī】会有足够的创作【zuò】自由。

　　下面设计使用的字体都有一定的设计，字体替换不是很容易。

　　这里所谓的带图搭配也是指这种可以设计的人物。

　　字形观察

　　首先，字体是【shì】图形，然后是【shì】承【chéng】载【zǎi】信息的文【wén】本。因此，在选择与图片【piàn】相匹【pǐ】配的字体时，需要重点考虑文字的【de】形态特征是否与图片【piàn】相协【xié】调。

　　在选【xuǎn】择字体之前，首先【xiān】要观【guān】察图片中的形【xíng】态特征。如果插【chā】图【tú】以插图的形【xíng】式【shì】呈现，那么插图中的【de】风格细节，以【yǐ】及这种风格所【suǒ】表达的时空氛【fēn】围感【gǎn】，都可以为你选择与之搭配的【de】字体提供依据【jù】。例如，英语中的无衬【chèn】线通常更现代，而衬线则【zé】更古典。

　　下一页的地图是【shì】用曲线建模的。因此，匹配【pèi】文本采用Adelle无衬【chèn】线【xiàn】字体。可以看出，字体【tǐ】中【zhōng】的弧线处理【lǐ】与地图中的曲【qǔ】线流建模相呼【hū】应。

　　下面设计的图纸【zhǐ】是分【fèn】散的【de】矩形，所以对应【yīng】使用的字【zì】体是graphik，也显示出【chū】非常清晰【xī】的几何边缘。

　　上述字形带来的形态【tài】特征与图片的【de】匹配【pèi】是使【shǐ】图文完美匹配的【de】途径之一。此外，我【wǒ】们知道一些【xiē】特殊的风格化【huà】字体【tǐ】也可以表达出一种特殊的【de】氛围。

　　比如下图中的机【jī】器在80年代看【kàn】起来非常机械，这种造型也营造出【chū】了技术【shù】世界的怀旧【jiù】感【gǎn】，所以【yǐ】像素文【wén】字最适合【hé】与此搭配【pèi】。

　　从这些英文字【zì】体【tǐ】的图形【xíng】匹【pǐ】配【pèi】的【de】例子来看【kàn】，我【wǒ】们需要观【guān】察和【hé】解构“形”的能力。同时，还需要对字体所承载的【de】风格特征进行分类。英语【yǔ】不仅要精挑细选，中文也要慎重考虑，而不是以期待遇到漂【piāo】亮【liàng】字体为目的进行设【shè】计，最后【hòu】的结果是失败【bài】。

　　字体【tǐ】也可以在原有字体的基础【chǔ】上【shàng】进行设【shè】计和“变形”，当然不能频繁改动【dòng】。根据主题做【zuò】一些“微调”，让【ràng】气氛更加【jiā】饱满【mǎn】立【lì】体。

　　比【bǐ】如填充圆字母【mǔ】的空心部【bù】分【fèn】，增加【jiā】了一种可爱感，也非常兼容有图片的角【jiǎo】色形象【xiàng】。

　　字间距和行距

　　用你敏锐的设【shè】计师的【de】眼【yǎn】睛观察字形，区分不同字体的【de】特点，是【shì】你选择较【jiào】大字体时需要的能【néng】力。所【suǒ】以【yǐ】非常适合第一张图【tú】片，Banner等。其中文本需【xū】要显示【shì】为图片。我们的字体可以显示在段落中。这时，形状的特征【zhēng】逐渐【jiàn】淡化，我们更【gèng】注重字与字【zì】之间【jiān】的关系【xì】，即字间距。

　　一【yī】般来说，字距的选择【zé】总是由字体本【běn】身及其与空间的关【guān】系决定的。字距较小时【shí】，传【chuán】达出紧【jǐn】凑感【gǎn】，而宽松的字距可【kě】以表达出轻松感。

　　比如大【dà】规【guī】模显示字【zì】体【tǐ】之间【jiān】的距离【lí】总【zǒng】是【shì】很近，因为字体本身已经占据【jù】了足够的空间，如果在字体【tǐ】之间增加更多的空【kōng】间，整【zhěng】个空间就会被【bèi】填满【mǎn】。所以我们也【yě】可【kě】以说，字距是根据整个空间来调整确定的。同时画面显示更加集中【zhōng】，所有【yǒu】箭头真的【de】是【shì】“千夫所【suǒ】指”，字间距缩小，有【yǒu】轻微的集中感。

　　相对较小的字体【tǐ】略显【xiǎn】轻松闲适，与之相匹配的画面也是一堆【duī】木头，与【yǔ】木匠【jiàng】的自然【rán】舒适相联系。

　　它也适【shì】用于汉语世界【jiè】。但不【bú】同的是【shì】，中文字体之间的距离【lí】应该更远【yuǎn】，以保持单【dān】一字体的独特显示。因为汉语中的每一个字都可以看【kàn】作是具【jù】有一【yī】定意境的画【huà】面，所以【yǐ】保【bǎo】持【chí】字距是汉语展示中保持【chí】美感【gǎn】的关键。

　　当字体【tǐ】垂直显【xiǎn】示时，上下【xià】字距应【yīng】该【gāi】加宽。这【zhè】是【shì】因为我们人类【lèi】的眼睛【jīng】对于上下顺序的阅【yuè】读习惯并不熟悉，如果字间距比较近，很容易形成字与字【zì】之间的视觉粘连。行【háng】距不同。检【jiǎn】查行距时，字【zì】体【tǐ】变成了段【duàn】落，出现在一段中的【de】字体就【jiù】是段【duàn】落。你应该注意整个段落的灰度值。所谓灰【huī】度值就是字体的密度。

　　大行距，像【xiàng】大字【zì】距一样，可以【yǐ】传达紧【jǐn】凑和轻松的感觉。同时，行距【jù】还【hái】与字体【tǐ】的颜色、字距、字号和最终形状有关【guān】。英【yīng】文行距可以【yǐ】是标准比【bǐ】例尺的1.5倍，但是，所【suǒ】有规【guī】则都【dōu】取决于条件【jiàn】。如果在特殊场合，仍然可以选择更【gèng】大或更小的【de】行距【jù】进行显示。

　　这一【yī】段【duàn】的字【zì】体排列符合画面传达的【de】儿童【tóng】教育成长的【de】主题。字体圆【yuán】润【rùn】，间距宽松，显示出轻松的氛围。字体本【běn】身采【cǎi】用【yòng】与LOGO相同的颜色，比黑色字体更有意思。

　　附言

　　明确字【zì】体的字【zì】间距所创造的密度，行距会带来【lái】段落的灰【huī】色几何。配【pèi】合字【zì】体本身【shēn】的显示【shì】形式，可以更好地选择匹【pǐ】配【pèi】的图片。对字体【tǐ】有更多的了解，对不同【tóng】风格字体的形状有一个大概的了解，这样在使用的【de】时【shí】候就不会到处瞎【xiā】找合适的字体了。通【tōng】常对于字体【tǐ】的积累是极【jí】其【qí】重要的。记【jì】得【dé】给【gěi】自己打造一【yī】个字体，这样在【zài】图文匹配的时候【hòu】就【jiù】可以得心应【yīng】手了。

• 上一章：网站页面设计怎样才会得到访客认可
• 下一章：网站设计要注意事项