为了账号安全,请及时绑定邮箱和手机立即绑定

CSS字体设置的几个问题?

CSS字体设置的几个问题?

拉风的咖菲猫 2019-04-13 08:36:45
问题描述查看框架代码的时候,发现了几处对字体设置的代码,请帮忙解答其作用。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.5tahoma,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*/}
查看完整描述

2 回答

?
哈士奇WWW

TA贡献1799条经验 获得超6个赞

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%
浏览器默认设置中,表单控件的字体大小默认比普通文本要小,这里把浏览器的默认样式覆盖掉。
                            
查看完整回答
反对 回复 2019-04-13
?
开心每一天1111

TA贡献1836条经验 获得超13个赞

1.代码段中font-size:62.5%;的作用
一、基础介绍
“Ems”:em大小不固定,成为相对单位(body则相对浏览器的默认字体设置,子集相对父级),浏览器默认设置字体大小为16px,则1em=16px,且其可扩展(2em=32px),目前常用的字体大小px换算成em:
16px=1em;
14px=0.875em;
12px=0.75em;
10px=0.625em;
“Pixels”:px大小是固定的,称为绝对单位,在移动端的可访问性差
“Points”:pt大小固定,属于绝对单位,适用于印刷、打印媒体
“Percent”:%跟em相似,以percent来表示,则当前字体的大小为100%,使用%设置字体,你的页面字体在移动设备端的可访问性也很好
二、关系
一般情况下,1em=12pt=16px=100%,下面例子前提在body中设置基础字体大小。
相对单位em和%会随着基础字体大小的变化而变化,而pt和px不会变化,这就是为什么选择em和%设置web文档文本的字体(其在移动端的访问性也很好)。
三、em与%,em与px的换算
em的特点:
em的值并不是固定的
em会继承父级元素的字体大小
重写步骤:
body选择器中声明Font-size:62.5%;
将你的原来的px数值除以10,然后换上em作为单位;
如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为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。
重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2*1.2=1.44的现象。比如说你在#main中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
诡异的12px汉字:在完成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.5tahoma,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
                            
查看完整回答
反对 回复 2019-04-13
  • 2 回答
  • 0 关注
  • 295 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信