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 如何处理相互覆盖的字体。一个小的清理应该可以解决它。

您在 headers 中声明 futura 像这样：

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

但是您已经在 body:

中声明了 futura

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

通常这没有问题，但是看看您在 custom.css 中声明 @font-face 的方式，这两种浏览器可能不同。

如果你想像 futuralilghtdcd 加载特定的 futura 权重，我会注释掉 headers 设置：


/* 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-face 声明中继续使用相同的命名空间 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;
}

希望对您有所帮助

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

iPhone browser style doesn't match Chrome simulation

css

iphone

simulation

google-chrome

stylesheet

HTML

CSS