css设置各种中文字体如雅黑、宋体、楷体

·零落·

已于 2024-02-01 11:10:52 修改

阅读量6.1w

点赞数 14

分类专栏： CSS/CSS3基础讲解文章标签： css 字体

于 2019-04-13 16:18:46 首次发布

本文链接：https://blog.csdn.net/xuaner8786/article/details/89284402

版权

CSS/CSS3基础讲解专栏收录该内容

24 篇文章 1 订阅

订阅专栏

文章目录

一、代码
二、字体库
三、CSS概念
四、CSS常见问题
五、热门文章

一、代码

.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }

二、字体库

华文细黑：STHeiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei
装Office会生出来的一些：

隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

三、CSS概念

CSS（层叠样式表）是一种用于描述网页上的元素如何呈现样式的语言。它可以控制网页的布局、字体、颜色、背景等方面的样式。

CSS的主要概念包括：

选择器（Selector）：选择器用于指定要应用样式的元素。可以根据元素的标签名、类名、ID等特性进行选择。
属性（Property）：属性定义了元素的具体样式。例如，可以使用属性设置元素的颜色、大小、边距等。
值（Value）：值用于定义属性的具体取值。例如，可以使用像素、百分比、颜色码等单位作为属性的值。
盒模型（Box Model）：盒模型是用于布局元素的基本概念。每个元素都被看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距。
层叠（Cascading）：层叠是指多个样式规则同时应用于一个元素时，根据优先级和特定的规则来确定最终的样式。
继承（Inheritance）：继承是指子元素可以继承父元素的样式。例如，如果父元素设置了字体样式，子元素默认会继承这个样式。
媒体查询（Media Query）：媒体查询用于根据设备的特性（如屏幕大小、分辨率等）来应用不同的样式。它可以使网页在不同的设备上显示出最佳的效果。

四、CSS常见问题

CSS常见问题及详细案例代码：

如何居中一个元素？

<div class="container">
  <div class="element">居中的元素</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.element {
  width: 200px;
  height: 200px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 200px;
}
</style>

如何设置一个元素的背景图片？

<div class="container">
  <div class="element"></div>
</div>

<style>
.container {
  height: 200px;
  background-color: lightgray;
}

.element {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
}
</style>

如何创建一个响应式布局？

<div class="container">
  <div class="sidebar">侧边栏</div>
  <div class="content">内容</div>
</div>

<style>
.container {
  display: flex;
}

.sidebar {
  width: 300px;
  background-color: lightgray;
}

.content {
  flex-grow: 1;
  background-color: white;
}
</style>

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}