同一字体大小在一个固定的宽度/高度分区是不同的显示在两台个人电脑。

Question

当查看固定内容的webapp (高度/宽度) div时，在不同的PC上显示的非常不同(即更大的字体，换行)。

JS像素深度在两台PC上是相同的。

屏幕截图: PC-1中的webapp

屏幕截图: PC-2中的webapp

在第一台PC中--内容出现在第二台PC的单行中--内容出现在两行(与第一台PC相比)

尝试了相同的分辨率，但内容看起来还是不一样。

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

如果有任何方法使内容在所有PC显示器上显示相同，请在此回答。(，不改变字体大小和缩放属性)

提前谢谢。

Answer 1

我建议使用normalize.css。不带样式的网站在每个操作系统上看起来都不一样，因为有不同的默认字体和特定于OS的样式，比如line-height和font-size。

至于字体，只需在您的项目中嵌入一些字体即可。如果不指定字体，Windows就会退回到。

Answer 2

我不知道你是否上传了你的字体文件。但是，这里有一种方法可以获得css中的字体：

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

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

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