在前端开发中，字体的选择对于网页的视觉效果和用户体验有着至关重要的影响。本文将介绍常见的用户浏览器可用字体集合，并提供示例代码以及实际应用场景，帮助读者在开发中更好地选择和使用字体。
常见字体集合
宋体、黑体、楷体
作为中文排版最常用的三种字体，宋体、黑体、楷体在各个操作系统和浏览器中都有被支持和预装的版本，它们具有良好的可读性和美观度，适合用于正文、标题等场景。
font-family: SimSun, STSong, serif; /* 宋体 */ font-family: SimHei, STHeiti, sans-serif; /* 黑体 */ font-family: KaiTi, STKaiti, serif; /* 楷体 */
微软雅黑、思源宋体、苹果丽黑
这三种字体是近年来受欢迎的新型字体，它们在现代浏览器和操作系统中得到广泛支持，不仅具备了传统字体的优点，还增加了更好的屏幕显示效果和更多的字体变体。
font-family: Microsoft YaHei, "Source Han Serif SC", "PingFang SC", sans-serif; /* 微软雅黑/思源宋体 */ font-family: "Apple LiGothic Medium", "PingFang HK", sans-serif; /* 苹果丽黑 */
Times New Roman、Arial、Helvetica
这三种英文字体是最为普及和通用的，它们在多个操作系统和浏览器中都有预装或可以简单下载，适合用于英文排版。
font-family: "Times New Roman", Times, serif; /* Times New Roman */ font-family: Arial, Helvetica, sans-serif; /* Arial/Helvetica */
字体的学习与指导
除了了解常用字体集合外，要做到更好地选择和使用字体，还需要掌握以下知识点：
字体的分类
字体可以按照不同的方式进行分类，如衬线字体（Serif）、无衬线字体（Sans-serif）、等宽字体（Monospace）等。了解不同类型的字体特点和应用场景，有助于更好地选择和组合字体。
字体的权重和样式
字体的权重和样式决定了字体的粗细和斜度，掌握这些知识可以帮助你更好地调整字体的外观。常见的权重包括 100-900，样式包括 normal、italic、oblique。
中文字体兼容性问题
对于中文网页开发，由于不同操作系统和浏览器对字体支持的差异，需要注意中文字体在不同设备上的显示效果。可以通过设置字体的备选列表来兼容这些问题。
font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
示例代码
以下是一个例子，展示了如何使用以上知识点来选择和组合字体：
-- -------------------- ---- ------- -- ---- -- - - ------------ ---------- ------ ---------- ------ ----------- - -- ---- -- --- --- -- - ------------ ---------- ------- --------- ---- ---------- ------ ---------- ------ ----------- ------------ ---- - -- ---- -- ----- --- - ------------ -------- ----- -------- ---------- ---------- ----- - -- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------