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

yizhihongxing

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网页实例 利用box-sizing实现div仿框架结构实现代码

    下面我会提供一个详细的攻略来讲解“CSS网页实例 利用box-sizing实现div仿框架结构实现代码”。首先,我们需要了解box-sizing的概念。 box-sizing是CSS3中的一个属性,用于指定盒子的尺寸计算模式,默认值为content-box。在content-box模式下,盒子的宽度和高度只包括内容的尺寸,而不包括边框和内边距的尺寸。而在bo…

    css 2023年6月10日
    00
  • Vue transition过渡组件详解

    Vue transition过渡组件详解 Vue提供了过渡组件<transition>和<transition-group>,用于在元素插入或移出页面中时添加过渡效果。<transition>用于单个元素,<transition-group>用于多个相同类型的元素。这篇文章将详细讲解如何使用这两个组件,以及一些…

    css 2023年6月10日
    00
  • Zen Coding 简易快速的HTML编写

    Zen Coding 是 Web 前端开发中最为流行的 HTML/CSS 快捷输入工具之一,它可以帮助开发者减少代码量,提高编写代码的效率。以下是 Zen Coding 的使用攻略: 简介 Zen Coding 是一种使用简单记号来快速编写 HTML 和 CSS 代码的方法。Zen Coding 的核心思想是以简单的方式表示复杂的构建,它通过预定义的缩写将代…

    css 2023年6月9日
    00
  • 通过CSS变量修改样式的方法示例

    以下是关于“通过CSS变量修改样式的方法示例”的完整攻略。 步骤一:定义CSS变量 首先,需要定义 CSS 变量。可以按照以下步骤操作: 在 CSS 文件中,使用 — 前缀定义变量名称和变量值。例如: :root { –primary-color: #007bff; –secondary-color: #6c757d; } 上述代码定义了两个变量,分别…

    css 2023年5月18日
    00
  • HTML嵌入CSS样式(四种方法)

    HTML嵌入CSS样式的方法有以下四种: style标签嵌入CSS样式 在HTML文档的头部或body部分中通过style标签嵌入CSS样式。可以在style标签中添加任意数量的CSS样式规则。 代码示例: <!DOCTYPE html> <html> <head> <title>HTML嵌入CSS样式示例&l…

    Web开发基础 2023年3月15日
    00
  • CSS滤镜同时过滤文字的问题的解决方法

    没问题! CSS滤镜同时过滤文字的问题 在实际项目中,我们可能会用到 CSS 滤镜来美化图片。但有时候,滤镜会同时作用于文本,导致文字变得不清晰或者不易阅读。下面就让我们来探讨一下如何解决这个问题。 问题原因 首先,我们需要了解一下为什么 CSS 滤镜会影响文本。CSS 滤镜是基于层的,也就是说滤镜会作用于元素的整个对象,而不仅仅是背景或者边框等。所以,如果…

    css 2023年6月11日
    00
  • css 评分效果的星星示例

    以下是关于“CSS评分效果的星星示例”的完整攻略,包含两个示例说明。 步骤一:创建HTML结构 首先,需要创建一个HTML结构。可以按照以下步骤操作: 在文本编辑器中创建一个新文件。 在文件中添加以下代码: <div class="rating"> <input type="radio" name=&…

    css 2023年5月18日
    00
  • HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

    下面是详细的讲解“HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用”的完整攻略。 1. 介绍 SVG(Scalable Vector Graphics)可以被用来创建图表、图标、地图和其他复杂的图形,也可以应用于基于XML(Extensible Markup Language)的文档中。蒙板(mask)是SVG中一个很重要的元素,可以用来指定一个…

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