最适合网络开发者的网站

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 索引 CSS 溢出 CSS 浮动 CSS 内联块 CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 下拉菜单 CSS 图片库 CSS 图像精灵 CSS Attr 选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特殊性 CSS !重要 CSS 数学函数

CSS 高级

CSS 圆角 CSS 边框图像 CSS 背景 CSS 颜色 CSS 颜色关键字 CSS 渐变 CSS 阴影 CSS 文本效果 CSS Web 字体 CSS 2D 变换 CSS 3D 变换 CSS 过渡 CSS 动画 CSS 工具提示 CSS 样式图像 CSS 图像反射 CSS 对象适合 CSS 对象位置 CSS 遮罩 CSS 按钮 CSS 分页 CSS 多列 CSS 用户界面 CSS 变量 CSS 盒子尺寸 CSS 媒体查询 CSS MQ 示例 CSS 弹性框

CSS 响应式

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

CSS 网格

网格简介 网格容器 网格项

CSS 南苏丹援助协会

SASS 教程

CSS 例子

CSS 模板 CSS 示例 CSS 测验 CSS 练习 CSS 证书

CSS 参考

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

初学者的 CSS 课程

尿素

CSS 网络安全字体


什么是 Web 安全字体?

Web 安全字体是在所有浏览器和设备上普遍安装的字体。


备用字体

然而,没有 100% 完全安全的 Web 字体。总有可能无法找到字体或无法正确安装字体。

因此,始终使用后备字体非常重要。

这意味着你应该在 font-family 属性。如果第一个字体不起作用,浏览器将尝试下一个,再下一个,依此类推。始终以通用字体系列名称结束列表。

例子

这里有三种字体:Tahoma、Verdana 和 sans-serif。第二和第三种字体是备用字体,以防找不到第一种字体。

磷{
字体系列:Tahoma、Verdana、sans-serif;
}
亲自尝试 »

适用于 HTML 和 CSS 的最佳 Web 安全字体

以下列表是适用于 HTML 和 CSS 的最佳网络安全字体:

  • Arial(无衬线)
  • Verdana(无衬线)
  • Helvetica (无衬线)
  • Tahoma(无衬线)
  • Trebuchet MS(无衬线)
  • Times New Roman(衬线)
  • 乔治亚(衬线)
  • Garamond(衬线)
  • Courier New(等宽)
  • Brush Script MT(草书)

笔记: 在发布您的网站之前,请务必检查您的字体在不同浏览器和设备上的显示情况,并始终使用后备字体!


Arial(无衬线)

Arial 是在线和印刷媒体中使用最广泛的字体。Arial 也是 Google Docs 中的默认字体。

Arial 是最安全的网络字体之一,适用于所有主流操作系统。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

Verdana(无衬线)

Verdana 是一种非常流行的字体。即使字体较小,Verdana 也易于阅读。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

Helvetica (无衬线)

Helvetica字体深受设计师的喜爱,适合多种类型的业务。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

Tahoma(无衬线)

Tahoma 字体的字符之间间距较小。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

Trebuchet MS(无衬线)

Trebuchet MS 由 Microsoft 于 1996 年设计。请谨慎使用此字体。并非所有移动操作系统都支持此字体。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

Times New Roman(衬线)

Times New Roman 是世界上最知名的字体之一。它看起来很专业,被许多报纸和“新闻”网站使用。它也是 Windows 设备和应用程序的主要字体。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

乔治亚(衬线)

Georgia 是一款优雅的衬线字体。它在不同字体大小下都具有极佳的可读性,因此非常适合移动设备响应式设计。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

Garamond(衬线)

Garamond 是许多印刷书籍使用的经典字体。它具有永恒的外观和良好的可读性。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

Courier New(等宽)

Courier New 是最广泛使用的等宽衬线字体。Courier New 通常用于编码显示,许多电子邮件提供商都将其用作默认字体。Courier New 也是电影剧本的标准字体。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

Brush Script MT(草书)

Brush Script MT 字体旨在模仿手写体。它优雅精致,但可能难以阅读。请谨慎使用。

例子

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet。

0 1 2 3 4 5 6 7 8 9

亲自尝试 »

提示: 另请查看所有可用Google 字体 以及如何使用它们。