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

时间:2015-07-06 19:38:06

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

我有以下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中是巨大的......我不知道为什么,像素应该是像素对吗?我也尝试过设置一个字体系列,但没有改变任何内容

1 个答案:

答案 0 :(得分:2)

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

发生这种情况时,浏览器将使用包含指定字符的其他字体。根据"后备"符号将显示不同的符号。浏览器选择的字体和字体指标。

以下是Chrome和Firefox开发人员工具的截图。

Chrome选择" Lucida Sans Unicode"字体,用于显示未在元素字体系列中列出的符号:

Chrome developer tools > Inspector > Rendered fonts

FireFox选择" Segoe UI Symbol"固定宽度和~2px更高的字体:

Firefox developer tools > Inspector > Fonts