css中默认中文字体font-family列表

CSS中默认中文字体font-family列表是CSS规范中为了在没有指定字体的情况下,浏览器能够默认展示合适的中文字体,使中文网页具有较好的可读性。常见的中文字体font-family列表如下:

font-family: SimSun, Songti SC, Microsoft Yahei, PingFang SC, Helvetica Neue, serif;

上述列表中,各个字体所对应的字形如下:

  • SimSun:对应宋体;
  • Songti SC:对应华文宋体;
  • Microsoft Yahei:对应微软雅黑;
  • PingFang SC:对应苹果的苹方字体;
  • Helvetica Neue:对应 Helvetica Neue 字体;
  • serif:默认的衬线字体。

这里需要注意的是,SimSunSongti SC是Windows系统下的字体,Microsoft Yahei是Windows Vista及更高版本中的系统字体,所以在Mac OS系统或其他系统中可能无法正常展示。而PingFang SC则是仅支持新版iOS系统和Mac OS X系统的字体,大部分PC端浏览器并不支持。

因此在实际使用中,可以根据具体情况来制定合适的中文字体font-family列表。下面以两条示例说明。

示例1:使用自定义字体

假设我使用了一种自定义的中文字体“Han Sans”,并将其下载至网站服务器中。为使所有页面都能正常展示这款中文字体,我可以按照以下方式指定字体列表:

@font-face {
  font-family: "HanSans";
  src: url("/fonts/hansans.ttf");
}

body {
  font-family: "HanSans", sans-serif;
}

在上述示例中,@font-face用于定义新的字体,src属性用于指定字体文件的路径,body中的font-family则指定了字体列表,“HanSans”作为首选字体,如果该字体无法正常展示,则使用默认的sans-serif字体。

示例2:使用网页字体

网页字体是一种通过浏览器直接加载的字体,使用网页字体可以有效地避免字体兼容性问题。为了使用网页字体,我们可以按照以下方式指定字体列表:

body {
  font-family: "Hiragino Sans GB", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

在上述示例中,我们使用了包括“Hiragino Sans GB”、“Microsoft Yahei”、“Helvetica Neue”、“Helvetica”和“Arial”在内的多个不同的字体,这些字体均可以在不同系统和浏览器中正常展示。其中,“Hiragino Sans GB”是一款在Mac OS X系统中自带的字体,而“Microsoft Yahei”是Windows系统中的系统字体。而“Helvetica Neue”、“Helvetica”和“Arial”是Web安全字体,它们在大部分浏览器中都存在,可以确保在各种设备和环境下都能够正常展示。

综上所述,对于中文字体的选择,我们应该结合浏览器和操作系统的兼容性等因素,构建合适的中文字体font-family列表,以达到更好的阅读体验。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css中默认中文字体font-family列表 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • css中转换为行内样式的解决方案(css-inline)

    下面是详细讲解 “css中转换为行内样式的解决方案(css-inline)” 的攻略: 什么是 “css中转换为行内样式的解决方案 (css-inline)”? 在开发网站或发送邮件等场合,我们需要将css文件中的样式转换为行内样式,这可以帮助我们避免引用外部样式表,从而达到控制网站或邮件结构和样式的目的。 “css中转换为行内样式的解决方案 (css-in…

    css 2023年6月9日
    00
  • 鼠标经过图片超链接时改变图片的大小(宽、高)的css

    在网页设计中,鼠标经过图片超链接时改变图片的大小是一个常见的效果。这种效果可以通过 CSS 的 :hover 伪类来实现。本文将提供一些关于如何使用 CSS 实现鼠标经过图片超链接时改变图片大小的方法,包括一些常见的 CSS 属性和示例说明。 CSS 属性 1. width 和 height 使用 width 和 height 属性可以改变图片的宽度和高度。…

    css 2023年5月18日
    00
  • CSS合理的编码与组织技巧

    下面就是详细讲解“CSS合理的编码与组织技巧”的完整攻略! 1. 命名规范 在CSS的编写中,命名规范是非常重要的一部分。命名规范不仅可以帮助我们更好地组织和管理代码,还可以提高代码的可读性和可维护性。 1.1 类名和ID名命名规范 类名:使用小写字母和短划线(-)连接,例如:.nav-bar、.main-content。 ID名:使用小写字母和下划线(_)…

    css 2023年6月9日
    00
  • IE下使用form时所在行被撑高的解决方法

    IE浏览器在渲染form表单元素时,可能会出现表单所在行被撑高的现象,这主要是由于IE会为表单自动添加display: inline-block;的样式导致的。下面提供两种解决方式,以便在IE中使用form表单元素不会影响页面布局。 方式一:使用vertical-align 将form表单元素和其所在的元素都设置为vertical-align: top;的样…

    css 2023年6月9日
    00
  • 网页文字应用CSS的一些技巧

    让我来为您详细讲解“网页文字应用CSS的一些技巧”的完整攻略。 一、为网页文字应用CSS的技巧 字体样式设置 通过设置 font-family 属性可以指定网页中使用的字体。通常推荐使用具备普适性的字体样式,例如 sans-serif 或 serif 字体。 示例代码: body { font-family: "Helvetica Neue&quo…

    css 2023年6月9日
    00
  • 利用SVG和CSS3来实现一个炫酷的边框动画

    利用SVG和CSS3来实现一个炫酷的边框动画的完整攻略如下: 1. 创建SVG路径 首先需要创建一个SVG路径作为边框动画的路径。可以使用Adobe Illustrator等矢量图形软件或者在线SVG绘制工具创建一个SVG路径,并且把该SVG路径保存成一个单独的SVG文件。在本例中,我们使用了以下的代码来创建一个SVG路径: <svg width=&q…

    css 2023年6月10日
    00
  • 详解关于浮动元素float使其父元素高度塌陷的原因及解决方法

    我们来详解一下关于浮动元素float使其父元素高度塌陷的原因及解决方法。 问题描述 在HTML和CSS中,float属性被广泛使用来实现页面布局。然而,使用float属性会引发一种经典的问题,就是当浮动元素包裹在其父元素中时,父元素的高度会丢失,即出现所谓的“高度塌陷”。 原因分析 浮动元素会被移动到它所在行的最左边或最右边,而不论它离周围元素的距离是多少。…

    css 2023年6月9日
    00
  • 实例讲解CSS3中的border-radius属性

    我来为你详细讲解如何使用CSS3中的border-radius属性来实现圆角效果。 什么是border-radius? border-radius是CSS3新增的属性,可以用来将元素的边框设置为圆角。可以设置每个角的圆角半径,也可以同时设置四个角的圆角半径。 语法格式如下: border-radius: 水平方向半径 垂直方向半径; border-radiu…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部