固定宽度/高度相同的字体大小Div在两台PC中的显示方式不同。

Question

当查看具有固定内容的固定（高度/宽度）div的webapp时，在不同的PC中显示的方式非常不同（即：更大的字体，换行符）。

两个PC中的JS像素深度相同。

Screenshot : The webapp in PC-1

Screenshot : The webapp in PC-2

在第一台PC中 - 内容出现在一行中 在第二台PC中 - 内容以两行显示（与第一台PC比较）

尝试使用相同的分辨率 - 但内容仍然不同。

这是因为CSS像素和设备像素不同吗？

如果有任何方法可以使内容在所有PC显示屏上显示相同，请在此处回答。（ 不更改字体大小和缩放属性 ）

提前致谢。

Answer 1

我建议使用normalize.css。由于存在各种默认字体和特定于操作系统的样式，例如line-height和font-size，因此无样式网站在每个操作系统上看起来都不同。

至于字体，只需在项目中嵌入一些字体即可。如果您没有指定字体，Windows将回退到Times New Roman。

Answer 2

我不知道你是否上传了你的字体文件。 但这是一种在css中获取字体的方法：

@font-face {
  font-family: main-font;
  src: url(nameOfFontFile.ttf);
}

在css文件中使用字体名称main-font。

#someId {
  font-family: main-font;
}