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日

相关文章

  • 详解如何使用CSS3中的结构伪类选择器和伪元素选择器

    下面我将详细讲解如何使用CSS3中的结构伪类选择器和伪元素选择器。 一、结构伪类选择器 结构伪类选择器,是指在样式表中通过元素在文档中的位置来选取元素的一种方式。在CSS3中,常见的结构伪类选择器有以下几种: 1.:first-child :first-child 选择器用于选择第一个子元素。 示例代码: <ul> <li>第一项&l…

    css 2023年6月9日
    00
  • JavaScript中this关键字使用方法详解

    下面是关于“JavaScript中this关键字使用方法详解”的完整攻略。 什么是this关键字 在JavaScript中,this关键字是一个非常重要的概念,它指向当前运行的上下文环境或者函数对象本身。因此,this关键字的含义是由代码在运行时决定的,而不是在编写代码时就确定下来的。 this与普通函数的使用 当this关键字在普通函数中被使用时,它指向的…

    css 2023年6月10日
    00
  • HTML5实现动画效果的方式汇总

    下面是关于“HTML5实现动画效果的方式汇总”完整攻略的详细讲解。 1. 基础动画技术 CSS3 动画 CSS3 动画是一种使用 CSS3 属性实现动画效果的方式,该方式几乎覆盖了所有动画效果。它的优点是简单、易实现,缺点是需要考虑浏览器兼容性。 该方式需要先定义动画关键帧,再将关键帧关联到动画对象上,最后定义动画的持续时间、速度等参数。下面是一个简单的 C…

    css 2023年6月9日
    00
  • jQuery实现广告条滚动效果

    实现广告条滚动效果的方法有很多,下面我们介绍一种使用jQuery实现的方法。 步骤1:HTML结构 首先,在HTML文件中创建一个包含部分广告的容器,它可以包含多个广告。例如: <div class="ad-container"> <div class="ad-item">广告1</div…

    css 2023年6月10日
    00
  • vant如何修改placeholder样式

    当使用vant中的组件时,有时我们需要修改组件中的特定样式,这包括修改placeholder的样式。下面是关于如何修改vant中placeholder样式的步骤: 1. 确认样式类名 vant中的组件都有各自的默认样式。要修改placeholder样式,我们需要先确认它所在的样式类名。可以通过在chrome浏览器中打开开发者工具,在要修改的元素上右键,选择“…

    css 2023年6月9日
    00
  • 详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)

    下面将会对 “详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)”进行详细讲解,包含以下内容: 模板标签的定义和使用 模板继承的定义和使用 在Django项目中使用模板标签和模板继承(包含2个示例) 1. 模板标签的定义和使用 模板标签指的是一些自定义的标记,用于个性化地扩展模板的功能,以实现网站开发的需求。常见的模板标签包含了跳转链接、…

    css 2023年6月10日
    00
  • 高频率Vue面试题汇总以及答案

    下面就为你详细讲解“高频率Vue面试题汇总以及答案”的完整攻略。 面试前的准备 在进行Vue面试前,建议你首先了解Vue的基础知识和流程。包括Vue的生命周期、组件、指令等。同时也要掌握一些基础的前端技能,例如HTML、CSS、JavaScript等。 除此之外,你还需要对常见的Vue面试题进行准备。下面就是一些高频率的Vue面试题。 高频率Vue面试题汇总…

    css 2023年6月9日
    00
  • 关于带有”显示更多”按钮的多行文本截断思考

    关于带有”显示更多”按钮的多行文本截断思考攻略,可以从下列步骤入手: 步骤1:确定截断长度 首先,需要确定文本截断的长度。可以根据实际需要来确定,通常情况下,为了不让页面显得过于拥挤,建议将多于两行的文本进行截断。 步骤2:截断文本 使用CSS的text-overflow属性可以将多行文本截断并显示”…”。但是,这样做的效果并不好,用户难以知道截断的文本…

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