Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

CSS 教程

CSS 主页 CSS 简介 CSS 语法 CSS 选择器 CSS 如何 CSS 注释 CSS 颜色 CSS 背景 CSS 边框 CSS 外边距 CSS 内边距 CSS 高度/宽度 CSS 盒模型 CSS 轮廓 CSS 文本 CSS 字体 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS 显示 CSS 最大宽度 CSS 定位 CSS Z-index CSS 溢出 CSS 浮动 CSS 行内块 CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 下拉菜单 CSS 图片库 CSS 图片精灵 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特定性 CSS !important CSS 数学函数

CSS 高级

CSS 圆角 CSS 边框图片 CSS 背景 CSS 颜色 CSS 颜色关键词 CSS 渐变 CSS 阴影 CSS 文本效果 CSS 网页字体 CSS 2D 变换 CSS 3D 变换 CSS 过渡 CSS 动画 CSS 提示 CSS 样式图片 CSS 图片反射 CSS object-fit CSS object-position CSS 遮罩 CSS 按钮 CSS 分页 CSS 多列 CSS 用户界面 CSS 变量 CSS @property CSS 盒模型尺寸 CSS 媒体查询 CSS 媒体查询示例 CSS Flexbox

CSS 响应式

RWD 简介 RWD 视窗 RWD 网格视图 RWD 媒体查询 RWD 图片 RWD 视频 RWD 框架 RWD 模板

CSS 网格

网格简介 网格容器 网格项目

CSS SASS

SASS 教程

CSS 示例

CSS 模板 CSS 示例 CSS 编辑器 CSS 代码片段 CSS 问答 CSS 练习 CSS 网站 CSS 面试准备 CSS 集训营 CSS 证书

CSS 参考

CSS 参考 CSS 选择器 CSS 函数 CSS 听觉参考 CSS 安全字体 CSS 可动画属性 CSS 单位 CSS PX-EM 转换器 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 浏览器支持

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 是一个经典的组合。它也遵循网页安全字体的标准

示例

使用“Georgia”字体作为标题,使用“Verdana”字体作为正文

美丽的挪威

挪威总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威与东北部的瑞典、芬兰和俄罗斯接壤,南部与斯卡格拉克海峡接壤,丹麦位于海峡的另一侧。

挪威拥有美丽的山脉、冰川和迷人的峡湾。首都奥斯陆是一座拥有绿色空间和博物馆的城市。伯根拥有色彩鲜艳的木制房屋,是前往壮丽的松恩峡湾的游轮出发点。挪威也以钓鱼、徒步旅行和滑雪而闻名。

自己尝试一下 »

Helvetica 和 Garamond

Helvetica 和 Garamond 是另一个经典的组合,使用网页安全字体

示例

使用“Helvetica”字体作为标题,使用“Garamond”字体作为正文

美丽的挪威

挪威总面积为 385,252 平方公里,人口为 5,438,657(2020 年 12 月)。挪威与东北部的瑞典、芬兰和俄罗斯接壤,南部与斯卡格拉克海峡接壤,丹麦位于海峡的另一侧。

挪威拥有美丽的山脉、冰川和迷人的峡湾。首都奥斯陆是一座拥有绿色空间和博物馆的城市。伯根拥有色彩鲜艳的木制房屋,是前往壮丽的松恩峡湾的游轮出发点。挪威也以钓鱼、徒步旅行和滑雪而闻名。

自己尝试一下 »

流行的 Google 字体搭配

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

Google 字体免费使用,拥有超过 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 字体,请访问我们的 如何使用 - Google 字体教程


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.