参考手册
CSS 字体
CSS 谷歌字体
CSS 字体属性
返回 CSS 字体

CSS 字体搭配

优秀的网页设计肯定离不开优秀的字体搭配。

字体搭配的规则

1.互相补充

找到相互补充的字体搭配总是安全的。

一个很棒的字体组合应该是协调的，而不是太相似或太不同。

2.使用 Font Superfamilies

Font Superfamilies 是一组设计得很好地协同工作的字体。因此，使用同一个 Font Superfamilies 下的不同字体是安全的。

例如，Lucida superfamily 包含以下字体：Lucida Sans、Lucida Serif、Lucida Typewriter Sans、Lucida Typewriter Serif 和 Lucida Math。

3.对比是王道

两种过于相似的字体经常会发生冲突。然而，做一下对比，可以带来了最好的字体组合效果。

示例：将衬线与无衬线组合是一种众所周知的组合。

一个强大的 Font Superfamilies 包括相同字体的衬线和无衬线变体（例如 Lucida 和 Lucida sans）。

4.只选一个老大

默认字体只能是一个。这将为页面上的字体建立层次结构。这可以通过改变尺寸、重量和颜色来实现。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   background-color: black;
  7.   font-family: Verdana, sans-serif;
  8.   font-size: 16px;
  9.   color: gray;
  10. }
  12. h1 {
  13.   font-family: Georgia, serif;
  14.   font-size: 60px;
  15.   color: white;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <h1>Beautiful Norway</h1>
  23. <p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
  25. </body>
  26. </html>
运行一下

下面，我们展示了一些流行的字体配对，它们将适合许多品牌和环境。

常用的字体搭配

Georgia 和 Verdana

Georgia 和 Verdana，是一个经典的组合。它还坚持 Web 安全字体标准：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body  {
  6.   font-family: Verdana, sans-serif;
  7.   font-size: 16px;
  8. }
  10. h1 {
  11.   font-family: Georgia, serif;
  12.   font-size: 46px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  18. <h1>Beautiful Norway</h1>
  20. <p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
  22. </body>
  23. </html>
运行一下
Helvetica 和 Garamond

Helvetica 和 Garamond，是另一个使用网络安全字体的经典组合：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: Garamond, serif;
  7.   font-size: 16px;
  8. }
  10. h1 {
  11.   font-family: Helvetica, sans-serif;
  12.   font-size: 46px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  18. <h1>Beautiful Norway</h1>
  20. <p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
  22. </body>
  23. </html>
运行一下

流行的 Google 字体搭配

如果您不想在HTML中使用标准字体，可以使用 Google 字体。

下面是一些流行的 google web 字体对：

Merriweather 与 Open Sans
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans">
  5. <style>
  6. body {
  7.   font-family: "Open Sans", sans-serif;
  8.   font-size: 16px;
  9. }
  11. h1 {
  12.   font-family: Merriweather, serif;
  13.   font-size: 46px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <h1>Beautiful Norway</h1>
  21. <p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
  23. </body>
  24. </html>
运行一下
Ubuntu 和 Lora
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
  5. <style>
  6. body {
  7.   font-family: Lora, serif;
  8.   font-size: 16px;
  9. }
  11. h1 {
  12.   font-family: Ubuntu, sans-serif;
  13.   font-size: 46px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <h1>Beautiful Norway</h1>
  21. <p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
  23. </body>
  24. </html>
运行一下
Abril Fatface 和 Poppins
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins">
  5. <style>
  6. body {
  7.   font-family: Poppins, sans-serif;
  8.   font-size: 16px;
  9. }
  11. h1 {
  12.   font-family: 'Abril Fatface', serif;
  13.   font-size: 46px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <h1>Beautiful Norway</h1>
  21. <p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
  23. </body>
  24. </html>
运行一下

如需所有可用的 Google 字体列表，请访问本站的 完整的 Google 字体。

CSS 谷歌字体
CSS 字体属性

分类导航