三种CSS字体照亮了你的网页设计
2022-08-26
在前一篇文章中，我讨论了为什么我们应该首先定义字体来开始视觉设计过程。这是三个非常简单的不同排版样式的例子。我不想深入讨论所有内容元素（如列表、引文、副标题等）。相反，我只会给你一些想法和指导，以帮助你设计一个非常漂亮的网站。注意这些排版风格的几个特点：很多标题，如果你设计一个像博客这样的网站，确保你的标题是突出的和毫无疑问的；对比度-这真的是浅灰色的文本看起来很酷，但我总是尽量避免它，但要确保我的文本与背景有很好的对比，使文章容易阅读；基线网格通常基于6px基线网格上的文本。在整个站点中维护一个完美的基线网格可能很困难，但它应该帮助您维护这种样式，并轻松将其应用于任何项目。
合法字体，最后我们有技术（浏览器支持）来优化网页字体。一些最流行的字体我在谷歌网页上使用。
恩里克塔+格鲁吉亚
这是一个大胆和高对比度的风格。请注意，红色高光可用于链接，项目符号，按钮等。
链接到谷歌字体：
这种样式的CSS代码：
H1{
颜色：262626；网站建设推荐
字体系列：Enriqueta，serif；
字体大小：44px；
线高：48px；
裕度：0 030像素；
}
H2 {
颜色：262626；
字体系列：Enriqueta，serif；
字体大小：32px；
字体粗细：正常；
线高：42px；
裕度：0 024 px；
填充：12px 0；
}
H3{
颜色：C73036；
字体系列：Enriqueta，serif；
字体大小：18px；
字体粗细：粗体；
线高：24px；
裕度：0 024 px；
填充：12px 0；
文本转换：大写；
}
P{
颜色：α2F2F2F；
字体系列：格鲁吉亚，衬线；
字体大小：17px；
线高：24px；
裕度：0 024 px；
}
POST信息{
颜色：αAAAAAA；
字体系列：格鲁吉亚，衬线；
字体大小：12px；
字体：斜体；
线高：12px；
填充：24px 0；
}
POST信息A{
颜色：C73036；
字体系列：Enriqueta，serif；
字体样式：普通；
字体网站建设推荐粗细：粗体；
文字装饰：无；
文本转换：大写；
}
PlayFair显示+开放SAN
这是优雅的风格和无衬线和无衬线字体的组合。因为标题字体不够强大，我用颜色突出显示了它。如果你想提高网站的性能，你可以很容易地用另一种无衬线字体替换打开的无衬线。记住，每个外部字体都会增加网站的加载时间。
链接到谷歌字体：
这种样式的CSS代码：
H1{
颜色：
字体系列：游乐场展示，衬线；
字体大小：40px；
字体粗细：正常；
线高：48px；
裕度：0 026 px；
}
H2 {
颜色：×3636；
字体系列：游乐场展示，衬线；
字体大小：26px；
字体粗细：正常；
线高：36px；
保证金：0 08PX；
填充：12px 0；
}
H3{
颜色：
字体系列：开放式无衬线字体；
字体大小：16px；
字体粗细：粗体；
线高：18px；
保证金：0 08PX；
填充：12px 0；
文本转换：大写；
}
P{
颜色：×3636；
字体系列：开放式无衬线字体；
字体大小：14px；
线高：18px；
保证金：0 08PX；
}
网站建设推荐
POST信息{
颜色：αB8B8B8；
字体系列：开放式无衬线字体；
字体大小：12px；
字体粗细：粗体；
线高：12px；
保证金：0 08PX；
文本转换：大写；
}
奇迹+露西达・桑斯
这是一种现代而轻松的排版风格。保持一个完美的基线网格可能很困难，因为不同的浏览器呈现引擎，但您可以注意到对文本和段落行的示例引用。
链接到谷歌字体：
这种样式的CSS代码：
H1{
边框底部：5px实心f0f1e7；
颜色：
字体系列：Marvel，sans-serif；
字体大小：54px；
字体粗细：正常；
线高：48px；
裕度：0 026 px；
填充：0 024 px；
文本转换：大写；
}
H2 {
颜色：
字体系列：Marvel，sans-serif；
字体大小：28px；
字体粗细：正常；
线高：30px；
保证金：0 08PX；
填充：12px 0；
文本转换：大写；
}
P{
颜色：×3636；
字体系列：Lucida Sans，sans-serif；
字体大小：16px；
线高：24px；
裕度：0 024 px；
}
块引用{
左边框：5px实心f0f1e7；
颜色：
浮动：正确；
字体系列：Marvel，sans-serif；
字体大小：20px；
字体：斜体；
线高：24px；
裕度：0 024 px 30 px；
左侧填充：30px；
宽度：150 px；
}
结论
我希望这些字体样式的示例对您有用。您也可以将它们作为以后项目创建自己的样式的指导原则。请记住避免使用太多的字体和颜色，并尽量保持简单。在网站的构建中，我们必须始终保持控制排版的总体样式。