网页字体设计:精致的字体使用实例

发布时间：2018-05-17浏览次数：863 <p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">这不仅仅关乎你说什么，而是你怎么说，是吧？根据你的目的，我们可以尝试更多，在排版上也更有创意。我们可以大胆的使用大字号，粗体，或是新奇独特的手写体。我们应该始终记得字体要有可读性，因为如果没有人能阅读的话，这样的字体就没什么可以炫耀的。如果设定了韵律</font> </td> </tr></tbody></table> <p><img alt="all_640320" width="640" src="http://www.webjx.com/files/allimg/131217/2151030.png"></p> <p>第一印象通常就是一种持续印象。不管你是否意识到，你的版式能够帮助用户在他们甚至还没有开始读一个字或者点击一个按钮之前建立一个体验。版式不仅仅是讲述一个故事，它告诉用户是这个网站的幕后以及这个背后的人是做什么的。对于字体的处理创造了一种氛围，同时也会像声音的音调一样击起长久的回想。</p> <p>你需要问一问你自己，你想要表达什么以及你想要怎么去表达它？想一想用户：当页面加载的时候你想让他们有什么样的感受和体验？版式建立一个交流的模式，同时，也表达了一个网站的个性。字体的选择将会决定人们对你的网站的反馈。</p> <p>以下的网站有着非常明显的个性，大部分都是通过版式来建立的。诚然，有时候他们并不是很完美（不幸的是，性能常常是个问题），但是他们通过字体来吸引用户来产生兴趣。好的网页版式不仅仅只是一个美好的视觉处理，同时也要注意速度。很多设计师彻底忽视了性能。请注意：这些网站没有在老的浏览器或者移动设备上做过测试。当然这不是这篇文章的主旨。相反的，我们将会近距离的观察有趣的版式处理以及字体的创新使用。</p> <h4><strong>精致的字体使用实例</strong></h4> <p>现在开始跟上字体去私奔，体验一路奇幻的<span class="wp_keywordlink_affiliate">字体设计</span>之旅。</p> <h4><strong><a target="_blank" href="http://thisisplayful.com/">Playful</a></strong></h4> <p><img alt="图-2" width="600" height="498" src="http://www.webjx.com/files/allimg/131217/2151031.png"></p> <p>Wow,这个网站确实很幽默！这个网站的调调不是仅仅根据字体的特征而设计的，而是通过它们的<span class="wp_keywordlink_affiliate">排版</span>方式。它打破了我们的常规交流的顺序。通常你会在印刷海报中看到轴对称的<span class="wp_keywordlink_affiliate">排版</span>，那通常给人印象深刻。在这个网站上，字体的选择并不是非常的有个性的装饰性或者是很好玩的装饰性字体，它就是用的非常简单的无衬线字体。非常棒的背景图案触觉体验，它引导阅读的方向，以及用户阅读网站的文字时头部从一边到另一边的运动。</p> <h4><strong><a target="_blank" href="http://www.lawebdelatelier.com/en">Atelier</a></strong></h4> <p><img alt="图-3" width="600" height="456" src="http://www.webjx.com/files/allimg/131217/2151032.png"></p> <p>这个网站的所有地方都值得关注。整个页面由不同的元素组合在一起有一种动感。网站的logo是用的一种宽的但是很优雅的字体，建立了一种设计基调。运动的感觉是由一条倾斜的线来建立的，这根倾斜的直线跟logo中的首字母“A”的倾斜保持一致，创建了这个网站的节奏。滑动的预览图深深的抓住你的眼球，图片很大让你感觉到无拘无束。然而，这个网站的背景图片居然有：2560*5350像素，2.4MB，哎哟！</p> <h4><strong><a target="_blank" href="http://www.cirq.com/">Cirp</a></strong></h4> <p><img alt="图-4" width="600" height="401" src="http://www.webjx.com/files/allimg/131217/2151033.png"></p> <p>这个为葡萄园设计的网站非常的独特和创新，设计的就像一个老式的海报。这个美丽的网站设计成功的找到了一种葡萄酒的感觉。我喜欢”Russian River”后面的阴影会跟随着你的鼠标的移动而运动从而在一个另外的静态页面创造出动感。这个地方最主要的缺点就是，从某中意义上说，文字是作为图像而嵌入到网站上的，可能会让文字无法复制和粘贴。还有，当然类似的设计被创造出来需要不少于3.4 MB和43次HTTP请求。</p> <h4><strong><a target="_blank" href="http://www.maxdc.co/">max Di Capua</a></strong></h4> <p><img alt="图-5" width="600" height="545" src="http://www.webjx.com/files/allimg/131217/2151034.png"></p> <p>这里的布局和排版混合在一起是通过一套模板的系统建立的，通常是几个部分重叠在一起。这种布局的方法很清新因为它不死板，并且非常容易改变。排版也是同样的感觉，因为他们都有很大的间距，不管是大量的文字还是稠密的文字。标题和说明性文字，以一种很容易阅读的无衬线字体出现在作品的旁边。</p> <h4><strong><a style="TEXT-DECORATION: none; COLOR: rgb(13,164,211); -webkit-transition: all 0.18s ease-out" target="_blank" href="https://www.rijksmuseum.nl/en">Rijksmuseum</a></strong></h4> <p><img alt="图-6" width="600" height="318" src="http://www.webjx.com/files/allimg/131217/2151035.png"></p> <p>一种很常见的字体的巨大的字母在整个屏幕范围之内，还延伸到整个页面。使得“Rijksmuseum”看起来比现实中的大很多。主页就通过循环漂亮的图片来展示博物馆的内容。主导航也很有意思：当你点击的时候，它会下滑然后让你选择子目录。整个网站的体积只有955KB以及31次HTTP请求&#8212;&#8212;优化做的很棒。</p> <p></p>