侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css – “行高:正常;”是个坏主意吗?

2022-12-24 星期六 / 0 评论 / 0 点赞 / 29 阅读 / 2499 字

当CSS line-height属性设置为normal时,我观察到一些相当不一致的 HTML页面呈现行为.我还发现了一个 blog post by Eric Meyer,其中不同的线高不一致:正常

... . . 当CSS line-height属性设置为normal时,我观察到一些相当不一致的 HTML页面呈现行为.我还发现了一个 blog post by Eric Meyer,其中不同的线高不一致:正常;讨论,这里只是一个引用:

.

Here’s the punchline: the effects of declaring line-height: normal not only vary from browser to browser,which I had expected—in fact,quantifying those differences was the whole point—but they also vary from one font face to another,and can also vary within a given face.

.

在我的情况下,我观​​察到添加一些Unicode符号,例如包络符号“✉”,如果line-height设置为normal,则会更改行块高度.设置行高:1.2;解决了这个问题.

我的问题是:是否有任何理由使用行高:正常;?它表现得如此不可预测.

.

解决方法

. 原则上,行高的正常值(通过默认或通过显式设置)是“正常”:浏览器应使用适合所用字体的值.这种变化不应该是一个惊喜:它隐含在 definition中.

这应该有助于解决这样的问题:你声明了font-family:a,b,c,d,sans-serif,但你不知道每台计算机中哪些特定字体(如果有的话)可用,或者默认的sans-serif字体可能是什么.这些字体可能需要不同的线条高度,以获得良好的外观.浏览器知道它正在使用哪种字体,因此它可以从内部表中获取它的行高.

在实际方面,浏览器可能无法很好地选择值;它往往有点太小.在排版方面,应​​根据几个考虑因素选择行高,不仅是字体,还有文本类型(例如,带有许多变音符号的文本需要更大的行高),尤其是度量(列宽,线长):长线需要更大的线高.

所以一般来说,设计师最好设置线高,同时适当考虑不同的方面.

这也避免了您描述的问题:当一行包含来自不同字体的字形时,每种字体可能具有与之关联的不同默认行高.例如,信封符号仅包含在少数几种字体中,因此可能的情况是浏览器被迫从与您声明的字体不同的字体中提取它.

这是混合字体时导致行间距不均匀的原因.重要的不是字形的高度,而是字体的行高.例如,在Cambria Math字体中添加仅仅句点“.”(如果可用)会导致较大的行间距 – 除非您将行高设置为特定值.

. . .. ...

广告 广告

评论区