iPhone 浏览器样式与 Chrome 模拟不匹配

Question

我现在很挣扎。

我不确定我的预加载器在 iPhone 上的显示是否有很大不同，即使在 Safari 或 Chrome 上也是如此。

注意：

我已经在 iPhone 设置上尝试过清除缓存。 它应该一直在复制：http://206.189.186.68/

结果： 字体加载非常不同

HTML

<div class="mobile-loader">
    <div class="d-flex flex-column align-items-center h-100 justify-content-center">
        <div class="row tex-left">
            <div class="col-sm-auto">
                <h1 class="ml2 mb-0">The New Protein</h1>
                <h1 class="ml4" style="margin-top: -12px;">Map</h1>
                <h6 class="ml3" style="font-family: futuralilghtdcd;">By OLIVA FOX CABANE</h6>
            </div>
        </div>
    </div>
</div>

CSS

@font-face {
    font-family: 'futuralilghtdcd';
    src: url('/fonts/FuturaDCD-Boo.eot');
    src: url('/fonts/FuturaDCD-Boo.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaDCD-Boo.woff') format('woff'),
       url('/fonts/FuturaDCD-Boo.ttf') format('truetype'),
       url('/fonts/FuturaDCD-Boo.svg#Futura DC D Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

是因为我在 CSS 中声明我的字体的方式不被 iPhone 接受吗？

Answer 1

您可能会看到 Safari 和 Chrome 如何处理相互覆盖的字体。一个小的清理应该可以解决它。

您在标题中声明futura，如下所示：

h1, h2, h3, h4, h5, h6 {
   font-family: 'futura', sans-serif; 
}

但是你已经在你的身体里声明了未来：

html,body,button,input,optgroup,select,textarea,.tooltip,.popover {
    font-family: 'futura', sans-serif;
}

通常这不会有问题，但看看您如何在 custom.css 中声明 @font-face 很可能这两个浏览器不同。

如果您想加载特定的 futura 权重，例如 futuralilghtdcd，我会注释掉标头设置：

/* dont need this; */

h1, h2, h3, h4, h5, h6 {
  /* font-family: 'futura', sans-serif; */
}


/* Apply certain @font-face declaration as low-level as possible */

html,body,button,input,optgroup,select,textarea,.tooltip,.popover {
    font-family: 'futuralilghtdcd', sans-serif;
}

/* Even better */

html, body {
    font-family: 'futuralilghtdcd', sans-serif;
}

在不同的字体声明中继续使用相同的命名空间font-family: futura 也是一个好主意：

这里有两个单独的名称：futurabold 和 futura，它们可以共享相同的名称，但它们可以有不同的 font-weights。只要您使用font-weight: bold 或<b> 等，浏览器就会处理其余的事情。

/* current */
@font-face {
    font-family: 'futurabold';
    src: url('/fonts/FuturaCon-ExtBol.eot');
    src: url('/fonts/FuturaCon-ExtBol.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaCon-ExtBol.woff') format('woff'),
       url('/fonts/FuturaCon-ExtBol.ttf') format('truetype'),
       url('/fonts/FuturaCon-ExtBol.svg#Futura Cond Extra Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'futura';
    src: url('/fonts/FuturaCon-Med.eot');
    src: url('/fonts/FuturaCon-Med.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaCon-Med.woff') format('woff'),
       url('/fonts/FuturaCon-Med.ttf') format('truetype'),
       url('/fonts/FuturaCon-Med.svg#Futura Cond Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Better */
@font-face {
    font-family: 'futura';
    src: url('/fonts/FuturaCon-ExtBol.eot');
    src: url('/fonts/FuturaCon-ExtBol.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaCon-ExtBol.woff') format('woff'),
       url('/fonts/FuturaCon-ExtBol.ttf') format('truetype'),
       url('/fonts/FuturaCon-ExtBol.svg#Futura Cond Extra Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'futura';
    src: url('/fonts/FuturaCon-Med.eot');
    src: url('/fonts/FuturaCon-Med.eot?#iefix') format('embedded-opentype'),
       url('/fonts/FuturaCon-Med.woff') format('woff'),
       url('/fonts/FuturaCon-Med.ttf') format('truetype'),
       url('/fonts/FuturaCon-Med.svg#Futura Cond Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

希望对你有所帮助