一、什么是fat fonts
fat fonts，也叫做chunky fonts，是指在字形设计中加入比原字体更厚、更浓的笔画，来达到强调的效果。它在网页设计中经常用于标题、标志等需要醒目效果的文字。
相比于传统的细字体，fat fonts更具有辨识度，而且配合合适的颜色、背景、排版等元素可以达到非常出色的设计效果。这也是为什么越来越多的设计师和网页开发者选用这种字体的原因。
二、为什么要使用fat fonts
1. 强调效果更好
由于fat fonts的笔画更宽、更明显，因此使用它能够有效地突出我们想要展示的关键信息。在设计网页时，这种字体通常用来展示标题、重要的标语、特殊的内容等等，使它们看起来更有力量感，更能够吸引用户的注意。
2. 更好的阅读体验
当我们使用细字体时，在小字号的情况下，字母之间可能会出现相互缠绕或者重叠的情况，影响了阅读体验。而fat fonts之所以受欢迎，是因为它们比细字体更易于阅读，尤其是在小尺寸的字体中表现更加优秀。
3. 更好的美观度
相信很多网页设计师都有这样的体验：当我们使用相同大小的字体时，平凡的字体看起来有些单调，甚至有些丑陋。而加入适当的厚重感，却可以让字体看起来更丰富、更美观。
三、如何在网页排版中使用fat fonts
1. 普通字型和fat fonts相结合
在网页设计中，我们通常不会完全使用fat fonts来展示信息，而是会将它们与其他字型进行结合。通常情况下，我们可以将页面的重要信息用fat fonts展示，而其他较为普通的文字则使用其他字体。这样既可以达到强调的效果，又不会让网页变得过于鲜艳刺眼。
2. 色彩搭配
fat fonts的另一个优势在于它非常适合进行色彩搭配设计。不同的颜色、背景可以让fat fonts表现出不同的效果。在搭配方面，我们可以考虑白色、灰色作为背景，或者考虑进行大胆的配色尝试。
3. 展示页面特点
在展示某些页面的特点时，fat fonts也可以作为一个有力的帮手。比如，如果你想要突出展示你网页的时代感或者创新性，那么使用fat fonts就会更具有说服力，让你的内容更有特色。
四、实战应用：fat fonts的代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fat Fonts</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
<style>
h1 {
font-family: "Roboto Condensed", sans-serif;
font-size: 72px;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 0 3px 3px #444;
}
</style>
</head>
<body >
<h1>WELCOME TO OUR WEBSITE</h1>
<p>Here you will find everything you need to explore and learn about fat fonts!</p>
...
</body>
</html>
五、结论
作为网页排版中的利器，针对体量较小的页面、极具强调性的文本或设计，fat fonts不失为一个不错的选择。无论是从设计角度还是从用户体验角度，它都有着独特的优势。诸如配色、字体、对比等问题，我们都可以通过多种方式让Text更加突出。最终的目标是为了呈现出一个精美的网页，以及为用户带来更好的体验
原创文章，作者：WMNJ，如若转载，请注明出处：https://www.506064.com/n/149231.html
微信扫一扫 
支付宝扫一扫 