最好的网站建设报价,商务网站建设模板,有专门教做蛋糕的网站,网站短期就业培训班1. 什么是字号与行高什么是字号大小#xff1f;字号大小就是字体的高度#xff0c;例如设置字号为50px#xff0c;那么它的高度如下图所示#xff1a;什么是行距呢#xff1f;如下图所示#xff1a;其中半行距 (lineHeight – fontSize) / 2。但是实际上#xff0c;fon…1. 什么是字号与行高什么是字号大小字号大小就是字体的高度例如设置字号为50px那么它的高度如下图所示什么是行距呢如下图所示其中半行距 (lineHeight – fontSize) / 2。但是实际上font-size经常不等于渲染的高度如下图所示对于笔者用的ProximaNova这个字体设置font-size为30px实际上高度为42px。为什么文字的高度不等于字号的高度这得从字体设计说起。为此装了一个FontForge和RoboFont软件设计一款自己的字体。2. 设计字体打开RoboFont如下图所示这个软件经常闪退需要注意保存双击l和y两个字母用钢笔工具勾勒形状如下图所示从上图可以看到它有一些刻度和度量线画一个示意图如下所示这些度量线的位置可以自己设置Units Per Em表示一个字的高度有1000个单位baseline的坐标为0其它线的坐标相对于baseline如下图所示然后把这个设计好的字体导出为my-font.ttf文件在网页通过font-face引入如下代码所示font-face {font-family: my-font;src:url(/Users/yincheng/Desktop/my-font.ttf);font-weight: normal;font-style: normal;
}然后使用这个font-family你会发现这个字体的font-size和height几乎完全一致如下图所示分别设置font-size为35px、45px、55px为什么我们设计的字体会如此“完美”而其他人的字体高度总是要大一点呢3. 为什么字体高度大于字体大小为此我们用FontForge打开ProximaNova.ttf因为这个软件可以查看字体的更多信息就是界面丑了点。如下图所示然后点击Element - FontInfo切到OS/2的Metric标签如下图所示把鼠标放到相应的输入框FontForge会提示你Windows系统是使用Win Descent和Ascent决定字体内容高度而Mac是用的HHead Descent和Ascent。上面字体在Mac下的Ascent为1079Ascent为-336如下图所示同时它的units of em仍然是1000如下图所示而它的内容区域content-area大小为1079 - (-336) 1415是font-size 1000 unit的1415 / 1000 ~ 1.4倍这就解释了一开始提出的问题设置font-size为30px实际上显示42px因为30 * 1.4 42px为进一步验证把我们设计的字体my-font改一下它的Ascent如下图所示这样它的内容区域高度就变成了1250unit是字号大小的1.25倍导出为一个新的字体在网页上使用如下图所示设置font-size为50px它的content-area高度为50 * 1.25 62.5px。这就证明了上面的分析是对的。那么为什么设计师们要这样搞呢为什么不控制在1000个unit的范围内首先因为常用的unit per em为有以下几个值如果你的unit选得越大那么曲线的光滑粒度可控制得更细如下图所示但是如果选1000的话因为它是一个整千比例什么的应该会比较好控制。其次大于1000可以让可控制的区域更大一般不会让字刚好撑到底线和顶线如下图所示4. 字体的宽度可以在RoboFont里面设置每个字的宽度例如y这个字母我要让它比z占的空间小一点如下图所示y为400z为500也就是说y的宽度为高度的0.4z的宽度为高度的0.5因为高度是1000.font-size为50px的时候4个yz的宽度为180px如下图所示因为(50 * 0.4 50 * 0.5) * 4 180px。再讨论一个经典的问题。5. 图片底部的空白有以下htmldiv styleborder:1px solid #cccimg src/Users/yincheng/Desktop/2.png/div在浏览器下面显示为为什么图片不是和div底部贴在一起而会有一点空白呢先来看一下这个空白有多大如下图所示设置div的font-size为40pxline-height为60pxdiv的高度为174图片的高度为154因此这里空白的高度为174 - 154 20px。为了辅助说明在img的后面跟上几个字母如下代码所示div classimg-containerimg src/Users/yincheng/Desktop/2.pnglyz/div画上辅助线这段空白的距离就是基线baseline到div底边的距离。由于基线的坐标是0底线的坐标为-250所以基线到底线的距离为250 / 1000 * 40 10px由于行高为60pxfont-size为40px所以底线到div的距离即半行距为60 - 40/ 2 10px因此基线到div底边的距离就为10px 10px 20px到这里就解释了为什么会有空白以及空白的大小怎么计算。那怎么去掉这段空白呢可以设置div的行高为0。并且需要注意的是在怪异模和有限怪异模式下为了计算行内子元素的最小高度一个块级元素的行高必须被忽略所以即使不设置div的行高为0图片也是和div贴在一起的。这个我们在《从Chrome源码看浏览器如何构建DOM树》讨论过。参考1. 深入了解CSS字体度量行高和vertical-align
