搜索

首页  >  问答  >  正文

css3 - CSS字体设置的几个问题？

问题描述

查看框架代码的时候，发现了几处对字体设置的代码，请帮忙解答其作用。

1.代码段中font-size: 62.5%;的作用？

html {
  font-size: 62.5%;  /*1*/
}

2.代码段中font:12px/1.5的作用？
3.代码段中\5b8b\4f53的作用？
4.代码段中font-size:1.2rem的作用？

body {
    font:12px/1.5 tahoma,arial,simsun,sans-serif,\5b8b\4f53;  /*2,3*/
    font-size:1.2rem;  /*4*/
}

5.代码段中font-size:100%的作用？

input,button,textarea,select,label {
    font-size:100%; /*5*/
}
迷茫迷茫2782 天前542

全部回复(3)我来回复

  • PHPz

    PHPz2017-04-17 11:19:10

    • font-size: 62.5%;
      浏览器的默认字体大小为16px，为了方便计算，这里把最顶层的html元素的字体大小设为16 * 62.5% = 10px。
    • font:12px/1.5 和 font-size:1.2rem;
      设置body下的字体大小为1.2rem = 10px * 1.2 = 12px，行高为字体大小的1.5倍。
    • \5b8b\4f53
      是宋体的unicode编码。（参考：中文字体编码对照表）
    • 表单的font-size:100%
      浏览器默认设置中，表单控件的字体大小默认比普通文本要小，这里把浏览器的默认样式覆盖掉。

    回复
    0
  • 黄舟

    黄舟2017-04-17 11:19:10

    1. 代码段中 font-size: 62.5%; 的作用

    一、基础介绍

    1. “Ems”: em 大小不固定，成为相对单位（body 则相对浏览器的默认字体设置，子集相对父级）， 浏览器默认设置字体大小为 16px，则 1em = 16px , 且其可扩展（2em = 32px），目前常用的字体大小 px 换算成 em：

      16px = 1em; 
14px = 0.875em; 
12px = 0.75em; 
10px = 0.625em;

    2. “Pixels”: px 大小是固定的，称为绝对单位，在移动端的可访问性差

    3. “Points”: pt 大小固定，属于绝对单位，适用于印刷、打印媒体
    4. “Percent”: % 跟 em 相似，以 percent 来表示，则当前字体的大小为 100% ，使用 % 设置字体，你的页面字体在移动设备端的可访问性也很好

    二、关系

    一般情况下，1em=12pt=16px=100%，下面例子前提在 body 中设置基础字体大小。

    相对单位 em 和 % 会随着基础字体大小的变化而变化，而 pt 和 px 不会变化，这就是为什么选择 em 和 % 设置 web 文档文本的字体（其在移动端的访问性也很好）。

    三、em 与 % ，em 与 px 的换算

    em 的特点：

    1. em 的值并不是固定的
    2. em 会继承父级元素的字体大小

    重写步骤：

    1. body 选择器中声明 Font-size:62.5%；

    2. 将你的原来的 px 数值除以 10，然后换上 em 作为单位；

      如果只需要以上两步就能解决问题的话，可能就没人用 px 了。经过以上两步，你会发现你的网站字体大得出乎想象。因为 em 的值不固定，又会继承父级 元素的大小，你可能会在 content 这个 p 里把字体大小设为 1.2em，也就是 12px。然后你又把选择器p的字体大小也设为 1.2em，但如果 p 属于 content 的子级的话，p 的字体大小就不是 12px，而是 1.2em= 1.2 * 12px=14.4px 。这是因为 content 的字体大小被设为 1.2em，这个 em 值继承其父级元素 body 的大小，也就是 16px * 62.5% * 1.2=12px,，而 p 作为其子级，em 则继承 content 的字体高，也就是 12px。所以 p 的 1.2em 就不再是 12px，而是 14.4px。

    3. 重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明，也就是避免以上提到的 1.2 * 1.2= 1.44 的现象。比如说你在 #main 中声明了字体大小为 1.2em，那么在声明 p 的字体大小时就只能是 1em，而不是 1.2em，因为此 em 非彼 em，它因继承#content的字体高而变为了 1em=12px。

    诡异的1 2px 汉字：在完成 em 转换时还会发现一个诡异的现象，就是由以上方法得到的 12px(1.2em) 大小的汉字在IE中并不等于直接用 12px 定义的字体大小，而是稍大一点。这个问题我已经解决，你只需在 body 选择器中把 62.5% 换成 63% 就能正常显示了。

    2.代码段中 font:12px/1.5 的作用？

    font: 12px;
line-height: 1.5;

    3.代码段中 \5b8b\4f53 的作用？

    font:12px/1.5 tahoma,arial,simsun,sans-serif,\5b8b\4f53;

    这是 css 中 font 的简写写法。

    字体：字体大小/字体行高 字体格式。

    "\5b8b\4f53" 就是 “宋体”。用 unicode 表示，不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。
    注释乱码：强烈建议不要用中文注释，如 font-family:'宋体'

    为了方便大家好查，整理了些中文名 Unicode：

    字体名称 Unicode
    新细明体 \65B0\7EC6\660E\4F53
    细明体 \7EC6\660E\4F53
    标楷体 \6807\6977\4F53
    黑体 \9ED1\4F53
    宋体 \5B8B\4F53
    新宋体 \65B0\5B8B\4F53
    仿宋 \4EFF\5B8B
    楷体 \6977\4F53
    仿宋_GB2312 \4EFF\5B8B_GB2312
    楷体_GB2312 \6977\4F53_GB2312
    微软正黑体 \5FAE\x8F6F\6B63\9ED1\4F53
    微软雅黑 \5FAE\8F6F\96C5\9ED1

    4. 代码段中 font-size:1.2rem 的作用？

    参考答案1

    5. 代码段中 font-size:100% 的作用？

    参考答案1

    回复
    0
  • 黄舟

    黄舟2017-04-17 11:19:10

    1和5 ：font-size:100%
    就是默认字体大小，62.5%就是默认字体大小的62.5%

    2：font:12px/1.5 ；12px字体大小，1.5倍行高（line-height）

    3:\5b8b\4f53 宋体的编码

    4：rem是根据html根元素计算的。html,body{font-size:20px;}那么1rem就是20px,2rem就是40px

    回复
    0
  • 取消回复