主页 / 问题 / 1046171
Accepted
Lukas
Asked:2020-11-14 23:32:49 +0000 UTC2020-11-14 23:32:49 +0000 UTC

不同浏览器的字体大小

  • 772

我遇到了这个例子：

HTML

<div>
  Подтверждение QRS - пароля
</div>

css

div {
 border:1px solid grey;
 width:298px;
 height:70px;
 font-size:20px;
 font-weight: 600;
 line-height: 70px;
 font-family: "Lato"
}

codepen上的相同示例

在 chrome 中，文本显示在一行中并放在一个块中，在 firefox 中，它分为两行。据我了解，这是由于浏览器对字体大小的考虑不同。如何充分克服这种行为？

html

1 个回答

  1. Best Answer

    font-size以百分比和相对单位表示的跨浏览器和跨平台字体大小 ( em)
    解决设置在所有浏览器中提供统一显示的字体大小的问题

    我们使用方法%/em- 百分比加相对单位

    显然，不能完全拒绝将字体大小设置为百分比。这是必要的，以便考虑用户的浏览器设置（如果它们与默认设置不同）。但是，进一步，需要完全过渡到相对单位 ( em)。我通常会做以下事情：

    我设置font-size为bodyin62.5% 既然现在1em等于10px，那么我font-size只用于相对值，例如and之间的1.2em 对应关系由公式确定empx"1em = 10px"

    这种解决方案的示例看起来更具可读性：

    body      { font-size:62.5%; }
#header   { font-size:.9em; }
#main     { font-size:1.1em; }

    除其他外，显示的方法pixel-perfect和完整的跨浏览器兼容性font-size。客户满意，布局设计师安全。

    *来源http://www.seditio.by/blog/html_and_css/accessible-cross-browser-pixel-perfect-font-size

    • 2

相关问题