时间戳

首页 > 解决方案 > Windows Chrome 上的 Helvetica Neue 问题

css - Windows Chrome 上的 Helvetica Neue 问题

问题描述

我们正在尝试使用 Helvetica Neue，但它无法在 Windows 上正确呈现。在屏幕截图中，您可以看到根据字体大小，某些字母的高度与其他字母不同，并且字母“D”在某些字体大小中呈现不佳。

此图像在 Windows 和 Chrome 上呈现。在 Safari Mac 上看起来不错。

不同字体大小的示例：

不同字体大小的示例

你知道为什么它看起来像这样以及如何解决吗？

代码：

@font-face {
	font-family: HelveticaNeue;
	src: url('font/HelveticaNeueLight.ttf');
	font-weight:normal;
}

@font-face {
	font-family: HelveticaNeue;
	src: url('font/HelveticaNeueMedium.ttf');
	font-weight:500;
}

@font-face {
	font-family: HelveticaNeue;
	src: url('font/HelveticaNeueBold.ttf');
	font-weight:bold;
}

html, body {
	font-family:HelveticaNeue, 'Arial Narrow';
}


p {
  font-weight:bold;
  margin-top:0;
  margin-bottom:1rem;
  text-align:center;
  display:block;
  line-height:1.5;
}
<p style="font-size:14px !important">14px MÅNADSVIS</p>

标签： cssfontsfont-size

解决方案

您可以尝试使用 font-smooth 和 text-rendering 这两个属性，看看是否有任何改进。

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

https://developer.mozilla.org/de/docs/Web/CSS/text-rendering

推荐阅读