html - 为什么使用某种@font-face 会导致涉及 CSS3 和 jQuery 转换的文本在 mac 上的 webkit 浏览器中不可见？

Question

我正在为我正在开发的网站使用 @font-face 字体，并且出于某种原因，当我使用 AvenirLight 而不是 Avenir 作为主体字体时，它使文本仅与 CSS3 和 JavaScript 转换相关联(不透明度:0到 1) 仅在 Mac webkit 浏览器上不可见。

我仍然不知道为什么会发生这种情况，以及为什么它只发生在 Mac 上的 webkit 浏览器中。

让我们尝试解决这个问题!

这是当前存在问题的地方(当您将鼠标悬停在两个产品图片上时，产品名称应该可见):

https://fine-grain-2.myshopify.com/

这是我的@font-face 声明:

@font-face {
    font-family: Avenir;
    font-weight: normal;
    font-style: normal;
    src: url("AvenirLTStd-Medium.otf") format("opentype");
}

@font-face {
    font-family: AvenirBold;
    font-weight: normal;
    font-style: normal;
    src: url("AvenirLTStd-Black.otf") format("opentype");
}

@font-face {
    font-family: AvenirLight;
    font-weight: normal;
    font-style: normal;
    src: url("AvenirLTStd-Light.otf") format("opentype");
}

这是我声明使文本消失的正文字体系列的地方:

body {
    background: none repeat scroll 0 0 #999999;
    font-family: AvenirLight;
    font-weight: normal;
}

如果我将其切换为此，文本将再次可见，但我真的很想使用 AvenirLight 与 Avenir:

 body {
        background: none repeat scroll 0 0 #999999;
        font-family: AvenirLight;
        font-weight: normal;
    }

Answer 1

对于每个字体声明，使用相同的字体系列名称 - 在您的情况下，Avenir - 设置您的字体声明如下。你最好不要使用 woffs 有两个原因 - 一个你可以将你的 woffs 降低到 20k 左右，每个转换器都有一个好的转换器来浏览你的页面加载，另一个是随时使用工作站字体 - 它可能会给你“错误”的印象您的字体在实际上不起作用时正在工作-(想想上次您将文档发送到打印机并且返回时看起来不像预期的那样，即通过打印服务器发送，不支持字体)另外，由于整个版权问题IE9 之前的版本，请参阅:http://caniuse.com/#search=woff - IE 确实是您需要计划支持的那个 - 对于跨浏览器支持，请使用 eot 文件。如果您希望获得适用于移动设备 android、apple 3g 的字体后备，请使用 fontkit 服务，您可以删除尽可能多的字形(例如 fontsquirrel)——但请注意，有许多专业字体已从类型转换厂列入黑名单您在哪里获得合法的功能性工作站许可服务，甚至您是否获得了这些许可服务将不允许使用带有字体的服务(这使得围绕 ttf/otf 进行规划变得非常困难)。

回顾:1.字体系列保持不变2.样式和重量变化的属性3. 在您的套件中使用 woffs 和 eots 或 (ttf/otf)4. 如果您关心更多的 IE 支持而不是手机 - 包括 eots 和 (1) otf fallback for android, os 4.0；反之为反*5.如果使用 sans-serif - 不要忘记“sans”中的“s”(打字错误)，您的页面将在 Chrome 中呈现正常，但在 IE 中呈现不正常，这会让您抓狂*6.如果使用特殊的 google 字体样式(例如 &effect=destruction)，请先阅读文档，以便了解谁可以看到和不能看到*7.总是，总是获得适当的许可文件，特别是对于商业网站!不要假设您的字体来自可靠来源，从而让自己处于妥协的境地!如果它不是开放许可证，并且您没有它的副本，您可能要承担责任。

/* font sytles
-------------------------------- */
@font-face { 
    font-family: "Avenir"; 
    src: url("your-bold-file") format("woff"); 
    font-style: normal; 
    font-weight: bold; 
}
@font-face {
    font-family: "Avenir";
    src: url("your-bolditalic-file") format("woff");
    font-style: italic;
    font-weight: bold;
}
@font-face {
    font-family: "Avenir";
    src: url("your-italic-file") format("woff"); 
    font-style: italic; 
    font-weight: normal; 
}
@font-face {
    font-family: "Avenir";
    src: url("your-normal-file") format("woff");
    font-style: normal;
    font-weight: normal;
}

body { /* universal body style attributes */
    margin: 0; /* reset body margins */
    font-family: "Avenir", sans-serif; /* whatever your font family is of */
    font-size: 100%; /* universal font size across all browsers */
}

顺便说一句，只要属性出现，新字体就会接管，你可以通过调用选择器来切换字体。如果您想坚持使用字体并赋予权重，即 - p>.class {font-weight:700;/* 不切换字体 */} - 只是添加了 woffs 作为例子，你可以放任何你想要的

从那里你的主题是做一些你的插件不是为移动端设计的。基本上你需要找到一种方法来打破固定的约束，否则你唯一的选择就是在给定的视口(viewport)内工作。 (例如，如果您将固定位置设置为相对位置，您会看到您的手机可以滚动，但没有幻灯片)

您可能需要联系主题支持或 galleria.io 寻求帮助。

    </article><!-- product-details -->

    <div id="galleria"><div style="width: 100%; height: 100%;" class="galleria-container notouch fullscreen"><div class="galleria-stage"><div style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;" class="galleria-images"><div style="overflow: hidden; position: absolute; top: 0px; left: 0px; transition: none 0s ease 0s ; opacity: 0; z-index: 0;" class="galleria-image"><div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2;" class="galleria-layer"></div></div><div style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 1; width: 1349px; height: 638px; transition: none 0s ease 0s ; z-index: 1;" class="galleria-image"><div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none;" class="galleria-layer"></div><img src="MG_9400_1024x1024.jpg" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; width: 1349px; height: 898px; position: absolute; top: -130px; left: 0px;" height="898" width="1349"></div></div><div style="opacity: 1; display: none;" class="galleria-loader"></div><div style="opacity: 1;" class="galleria-counter"><span class="galleria-current">1</span> / <span class="galleria-total">10</span></div><div class="galleria-image-nav"><div style="opacity: 0.5; display: block;" class="galleria-image-nav-right"></div><div style="opacity: 0.5; display: block;" class="galleria-image-nav-left"></div></div></div><div style="top: 562px; opacity: 1;" class="galleria-thumbnails-container"><div class="galleria-thumb-nav-left disabled"></div><div style="overflow: hidden; position: relative;" class="galleria-thumbnails-list"><div style="overflow: hidden; position: relative; width: 180px; height: 10px; left: 0px;" class="galleria-thumbnails"><div class="galleria-image active"><span style="opacity: 1;" class="img"></span></div><div class="galleria-image"><span style="opacity: 1;" class="img"></span></div><div class="galleria-image"><span style="opacity: 1;" class="img"></span></div><div class="galleria-image"><span style="opacity: 1;" class="img"></span></div><div class="galleria-image"><span style="opacity: 1;" class="img"></span></div><div class="galleria-image"><span style="opacity: 1;" class="img"></span></div><div class="galleria-image"><span style="opacity: 1;" class="img"></span></div><div class="galleria-image"><span style="opacity: 1;" class="img"></span></div><div class="galleria-image"><span style="opacity: 1;" class="img"></span></div><div class="galleria-image"><span style="opacity: 1;" class="img"></span></div></div></div><div class="galleria-thumb-nav-right disabled"></div><div style="visibility: hidden;" class="galleria-thumbnails-tab"></div></div><div style="position: absolute; left: -10000px; display: block; opacity: 1;" class="galleria-info"><div style="width: 1309px;" class="galleria-info-text"><div style="display: none;" class="galleria-info-title"></div><div class="galleria-info-description">BOWDEN</div></div></div><div style="opacity: 0;" class="galleria-tooltip"></div></div></div><!-- galleria -->

如果觉得有帮助，请投票，因为我是社区的新手，并且由于 2 个帖子的限制而无法做出贡献。谢谢