如果不缩放，粗体字体在移动设备上看起来很奇怪答案

【问题标题】：Bold fonts looks weird on mobile device if not zooming如果不缩放，粗体字体在移动设备上看起来很奇怪
【发布时间】：2020-01-22 04:09:29
【问题描述】：

所有粗体版本的字体在移动设备上都显得很奇怪，我将字体设置为巨大以进行测试，由此看来，字体本身似乎是“双倍”的，它们之间有轻微的偏移。如果以及当我放大以仔细查看文本时，它会“变得”正常 - 并按应显示的方式显示（并且确实在桌面浏览器上显示）。

Non-zoomed printscreen

Zoomed printscreen

实际上并没有要显示的“巫毒”代码，它们都是非常基本的。所有粗体字体在显示状态下看起来都很奇怪，除非你在移动设备上捏缩放它们。但是为了它：

.title {
font-size: 30px;
font-family: "Open Sans Condensed", sans-serif;
font-weight: 500; /* same problem with 900 */
font-style: normal;
font-variant: normal;
color: #000;
text-align: center;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css">

<div class="title">
World wide shipping for flat rates!
</div>

我在移动设备上尝试了不同的浏览器，但都显示相同的问题。粗体时所有字体都会发生这种情况，而不仅仅是我在此示例中使用的字体。

【问题讨论】：

标签： html css mobile google-fonts

【解决方案1】：

    <style type="text/css">
        .title {
            font-size: 30px;
            font-family: 'Open Sans Condensed', sans-serif;
            font-weight: 900;
            font-style: normal;
            font-variant: normal;
            color: #000;
            text-align: center;
        }

&lt;div class="title"&gt;World wide shipping for flat rates!&lt;/div&gt;

【讨论】：