首页
前端开发
后端开发
数据库
数据分析
开发工具
测验/考试
代码笔记
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线 👉 点击学习
导航分类
CSS 可动画属性CSS 单位
主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

CSS Web安全字体

Web 安全字体是指是指在大多数操作系统（Windows、macOS、Linux、iOS、Android）中默认安装的字体。

使用这些字体可以确保您的网站在不同平台上显示一致，而无需依赖用户安装特定字体。

衬线字体 (Serif)

衬线字体在字母笔画末端有装饰性线条（如 Times New Roman），适合传统、正式的内容（如报纸、书籍）。

font-family: "Times New Roman", Times, serif;
font-family: Georgia, serif;
font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif;

实例演示效果：

Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9
Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9
Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9

无衬线字体（Sans-Serif）

无衬线字体（如 Arial）更现代、简洁，适合网页正文、UI 设计。

font-family: Arial, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Tahoma, sans-serif;
font-family: "Trebuchet MS", sans-serif;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

实例演示效果：

Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9
Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9
Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9
Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9
Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9

等宽字体（Monospace）

等宽字体（如 Courier New）每个字符宽度相同，常用于代码、终端显示。

font-family: "Courier New", Courier, monospace;
font-family: "Lucida Console", Monaco, monospace;

实例演示效果：

Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9
Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9

手写/装饰字体（Cursive/Fantasy）

较少使用，适用于特殊设计需求。

font-family: "Comic Sans MS", cursive;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;

实例演示效果：

Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9
Welcome to Shanghai! Shanghai is one of the four direct-administered municipalities of the People's Republic of China. 0 1 2 3 4 5 6 7 8 9
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。
85 章节
109 阅读
0 评论
教程目录

CSS 参考手册

CSS 属性（字母排序） CSS 属性（功能排序） CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 可动画性 CSS Web安全字体 CSS 单位 CSS 颜色 CSS 颜色值

CSS 属性

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius border-end-start-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-left-style border-right-style border-top-left-radius border-top-right-radius border-top-style