不同浏览器上的css不同的字体大小像素答案

【问题标题】：css different font-size pixels on different browsers不同浏览器上的css不同的字体大小像素
【发布时间】：2015-09-24 02:15:09
【问题描述】：

我有以下css，它是一个横向箭头：

#change-pass-req::before {
  content: "\25C0";
  position: absolute;
  top: 55px;
  left: -18px;
  font-size: 25px;
  line-height: 15px;
  color: #ddd;
  text-shadow: none;
}

但是，箭头在 IE 中是超小，在 Firefox 中是中等大小，在 chrome 中是巨大的……我不知道为什么，像素应该是像素吧？我也试过放一个字体系列，但没有任何改变

【问题讨论】：

您是否在任何浏览器中放大？按Ctrl + 0 确保每个缩放级别为 100%。此外，请包含足够的 HTML（除了您的 CSS）来重现此错误。

标签： html css google-chrome internet-explorer firefox

【解决方案1】：

显然，您正在尝试显示指定字体系列中可能不存在的符号 (◀)。

发生这种情况时，浏览器将使用另一种包含指定字符的字体。根据浏览器选择的“备用”字体和字体指标，符号的显示会有所不同。

以下是 Chrome 和 Firefox 开发者工具的屏幕截图。

Chrome 选择了“Lucida Sans Unicode”字体来显示元素字体系列中未列出的符号：

FireFox 选择了“Segoe UI Symbol”字体，宽度固定，高约 2px：

【讨论】：