<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>系统字体堆栈</title>
<style>
p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<p>
-apple-system 是旧金山，用于iOS和macOS（不是Chrome）
BlinkMacSystemFont 是旧金山，在macOS Chrome上使用
Segoe UI 在Windows 10上使用
Roboto 在安卓系统上使用
Oxygen-Sans 是在GNU + Linux上使用的
Ubuntu 是在Linux上使用的
"Helvetica Neue" 和Helvetica 在macOS 10.10及以下版本中使用(因为有空格，所以用引号括起来)
Arial 是所有操作系统都广泛支持的字体
sans-serif 如果不支持任何其他字体，则为备用无衬线字体
</p>
</body>
</html>
网友评论