| 【CSS】CSS 文本样式 ① ( font 字体设置 | 您所在的位置：网站首页 › html设置字体黑体 › 【CSS】CSS 文本样式 ① ( font 字体设置 |
【CSS】CSS 文本样式 ① ( font 字体设置
|
文章目录一、 字号大小设置1、 语法简介2、 代码示例二、 字体设置1、 语法简介2、 Unicode 编码字体名称3、 代码示例一、 字号大小设置1、 语法简介 在 CSS 中 , 字号大小 设置 语法如下 : p { font-size:16px; }上述代码的含义是 , 将 HTML 页面所有的 p 标签字号都设置成 16 像素 ; font-size 属性值 的单位 推荐使用 px 像素 , 也可以使用下面的 长度单位 : px : 像素 , 强烈推荐使用 ;em : 相对 当前 对象文本 的大小 ;in : 英寸 , 绝对长度单位 ;cm : 厘米 , 绝对长度单位 ;mm : 毫米 , 绝对长度单位 ;pt : 点 , 绝对长度单位 ;font-size 设置注意事项 : 推荐使用 像素 px 作为单位 , 其它长度单位不常用 , 适配比较麻烦 ;不同的浏览器的默认文字大小不同 , 尽量为每个 body 设置一个基本的默认字体大小 , 推荐在 body 中设置 16 px ;Google 浏览器默认文字大小 16 像素 ;2、 代码示例代码示例 : 在开始处 , 先设置 body 标签下所有的文字为 16 px , 然后在后面定义 tittle 类的文字大小为 20 px , 这样遇到 tittle 类标签后 , 在该类标签中可以覆盖之前的 body 标签样式 ; Google body { font-size:16px; } .tittle { font-size:20px; }静夜思 床前明月光 疑是地上霜 举头望明月 低头思故乡 执行效果 :  在这里插入图片描述二、 字体设置1、 语法简介CSS 文字 字体设置语法 : p { font-family:"微软雅黑"; }常见的字体 : 微软雅黑 , 默认字体 ;宋体黑体如果 指定了多个字体 , 如下样式 , 优先使用前面的字体 ; .tittle { font-size:20px; font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei"; }先查找黑体 , 如果黑体存在直接使用黑体 , 如果黑体不存在则继续查找 Arial 字体 , 直到找到合适的字体 ; ( 如果所有字体都没有 , 默认使用电脑的默认字体 ) font-family 字体属性值注意事项 : 如果设置多个字体属性值 , 使用逗号隔开 ;中文名称 的字体 , 使用双引号包裹 ;英文名称 的字体 , 直接写上去即可 , 不必使用双引号 ;如果 字体的 英文名称 中包含 空格 , # , $ 等字符 , 则必须加双引号 或 单引号 ;使用系统的默认字体 , 不要使用不常见的字体 , 保证浏览器适配 ;2、 Unicode 编码字体名称在 CSS 中 设置 中文名称字体 时 , 涉及到 不同的 文件编码 , 如果编码不匹配会产生乱码 ; p { font-family:"微软雅黑"; }出现乱码后解决方案有两种 : 使用英文名称 : 如果设置 微软雅黑 字体 , 则可以 设置 " Microsoft Yahei " 字体 ; p { font-family:"Microsoft Yahei"; }使用 Unicode 编码 : 注意 Unicode 编码要使用双引号括起来 ; p { font-family:"\5FAE\8F6F\96C5\9ED1"; }中文字体名称 对应 Unicode 不编码 : 字体名称 英文名称 Unicode 编码 宋体 SimSun \5B8B\4F53 新宋体 NSimSun \65B0\5B8B\4F53 黑体 SimHei \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 隶书 LiSu \96B6\4E66 幼园 YouYuan \5E7C\5706 华文细黑 STXihei \534E\6587\7EC6\9ED1 细明体 MingLiU \7EC6\660E\4F53 新细明体 PMingLiU \65B0\7EC6\660E\4F53 3、 代码示例代码示例 : Google body { font-size:16px; font-family:"宋体"; } .tittle { font-size:20px; font-family:"黑体",Arial,"微软雅黑","Microsoft Yahei"; }静夜思 床前明月光 疑是地上霜 举头望明月 低头思故乡 执行效果 :  在这里插入图片描述
|
【本文地址】