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 ，这两个浏览器可能有所不同。

如果您想加载特定的未来权重，例如

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;
}

希望这对您有一点帮助