三种CSS字体照亮了你的网页设计

2021-04-15 15:15| 发布者:

  在前一篇文章中,我讨论了为什么我们应该首先定义字体来开始视觉设计过程。这是三个非常简单的不同排版样式的例子。我不想深入讨论所有内容元素(如列表、引文、副标题等)。相反,我只会给你一些想法和指导,以帮助你设计一个非常漂亮的网站。

  注意这些排版风格的几个特点:很多标题,如果你设计一个像博客这样的网站,确保你的标题是突出的和毫无疑问的;对比度-这真的是浅灰色的文本看起来很酷,但我总是尽量避免它,但要确保我的文本与背景有很好的对比,使文章容易阅读;基线网格通常基于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;

  }

  结论

  我希望这些字体样式的示例对您有用。您也可以将它们作为以后项目创建自己的样式的指导原则。请记住避免使用太多的字体和颜色,并尽量保持简单。在网站的构建中,我们必须始终保持控制排版的总体样式。

<
>
昆明腾瑞网络有限公司积极引导客户理解互联网对企业的品牌价值,并充分把握中小型企业信息化管理的个性化需求,提供真正有价值的信息化服务产品,让企业在全球一体化的经济体系下的竞争中处于不败之地,不仅深谙互联网核心技术的开发,而且对全球互联网市场和IT行业的大势均有精确的把控。

联系我们

昆明龙泉路实力壹方城6栋1702号

0871-65125379(服务时间:9:00-18:00)

3568089682@qq.com

在线咨询 官方微信官方微信

网站建设 微信开发 售后服务 咨询电话0871-65125379 返回顶部
返回顶部