CSS 绝佳字体搭配
绝佳的字体搭配对出色的设计至关重要。
字体搭配规则
以下是一些创建出色字体搭配的基本规则
1. 互补
寻找互补的字体搭配通常是安全的。
出色的字体组合应该和谐统一,既不太相似也不太不同。
2. 使用字体家族
字体家族是一组设计上易于协同工作的字体。因此,使用同一字体家族内的不同字体是安全的。
例如,Lucida 字体家族包含以下字体:Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif 和 Lucida Math。
3. 对比是关键
两种过于相似的字体常常会产生冲突。然而,恰当的对比能够让每种字体都发挥出最佳效果。
示例:将衬线字体与无衬线字体结合是一种广为人知的搭配。
一个强大的字体家族通常包含同一字体的衬线和无衬线变体(例如:Lucida 和 Lucida Sans)。
4. 只选择一个主导
一种字体应该成为主导。这可以为页面上的字体建立层级。可以通过改变大小、粗细和颜色来实现。
示例
毫无疑问,“Georgia”是这里的“老板”。
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
自己动手试一试 »
下面,我们展示了一些流行的字体搭配,它们适用于许多品牌和场景。
Georgia 和 Verdana
Georgia 和 Verdana 是经典的组合。它们也符合 Web 安全字体标准。
示例
将“Georgia”字体用于标题,将“Verdana”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
Helvetica 和 Garamond
Helvetica 和 Garamond 也是一种经典的组合,使用 Web 安全字体。
示例
将“Helvetica”字体用于标题,将“Garamond”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
流行的 Google 字体搭配
如果您不想在 HTML 中使用标准字体,可以使用 Google Fonts。
Google Fonts 可免费使用,拥有超过 1000 种字体可供选择。
以下是一些流行的 Google 网页字体搭配。
Merriweather 和 Open Sans
示例
将“Merriweather”字体用于标题,将“Open Sans”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
Ubuntu 和 Lora
示例
将“Ubuntu”字体用于标题,将“Lora”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
Abril Fatface 和 Poppins
示例
将“Abril Fatface”字体用于标题,将“Poppins”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
Cinzel 和 Fauna One
示例
将“Cinzel”字体用于标题,将“Fauna One”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
Fjalla One 和 Libre Baskerville
示例
将“Fjalla One”字体用于标题,将“Libre Baskerville”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
Space Mono 和 Muli
示例
将“Space Mono”字体用于标题,将“Muli”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
Spectral 和 Rubik
示例
将“Spectral”字体用于标题,将“Rubik”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
Oswald 和 Noto Sans
示例
将“Oswald”字体用于标题,将“Noto Sans”字体用于正文。
美丽的挪威
挪威的总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威北部和东北部与瑞典、芬兰和俄罗斯接壤,南部濒临斯卡格拉克海峡,南部有丹麦。
挪威拥有美丽的群山、冰川和令人惊叹的峡湾。首都奥斯陆是一个充满绿色空间和博物馆的城市。卑尔根以其色彩缤纷的木屋而闻名,是前往壮观的松恩峡湾游轮的起点。挪威还以渔业、徒步旅行和滑雪而闻名。
自己动手试一试 »
要获取所有免费 Google 字体列表,请访问我们的 How To - Google Fonts 教程。