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

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

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

让我们试着弄明白这一点

以下是当前存在的问题（当您将鼠标悬停在两个产品图像上时，产品名称应可见）：

以下是我的@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字体系列：

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

如果我将其切换为此，文本将再次可见，但我确实希望使用AvenirLight vs Avenir：

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

---

我注意到您使用的“AvenirLight”字体大小为600，这是一个粗体字，同时使用浅色字体+粗体字可能与Mac webkit浏览器不兼容/无法正确实现。首先尝试使用正常的

字体重量进行测试。
四处窥探，有一件事会跳出来：

@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("12-Avenir-Light.ttf") format("opentype");
}

您有一个TrueType字体（.ttf），其格式为“opentype”（otf）。我无法在Chrome的开发工具中找到远程更改它的方法，以查看是否纠正了它，但这似乎是一个合理的原因

ttf文件为truetype格式：

src: url("12-Avenir-Light.ttf") format("truetype");

我很好奇，你是否知道为什么嵌入式字体看起来粗体。我以前遇到过这个问题，不知道是什么引起的

我会尝试通过FontSquirrel运行您的字体，以确保您嵌入了所有正确的字体格式（eot、ttf、otf、woff、svg），从而使您的站点具有跨浏览器友好性。您可能已经这样做了，但在您的代码中我刚刚看到了ttf/otf

对于每个字体声明，请使用相同的字体系列名称-在您的示例中为Avenir-如下所示设置字体声明。您最好使用WOFF，原因有两个-一个是您可以使用一个良好的转换器将WOFF降低到20k左右，以浏览页面负载，另一个是随时使用工作站字体-这可能会给您一种“错误”的印象，即您的字体正在工作，而实际上它不是-（想想上次您将文档发送到打印机时，它返回时的外观与预期不符，即通过打印服务器发送，字体不受支持）此外，由于IE9之前的copywright问题，请参阅：-IE确实是您需要计划支持的工具-对于交叉浏览器支持，请使用eot文件。如果您希望在移动android、apple 3g上获得字体回退，请使用fontkit服务，您可以删除尽可能多的字形（例如fontsquirrel）-但是，请注意，有许多专业字体从制造地的铸造厂被列入黑名单，即使您获得了合法的、功能性的工作站许可证，服务也不允许使用字体服务（这使得围绕ttf/otf进行规划非常困难）

概述：
1.字体系列保持不变
2.样式和重量更改的属性
3.在套件中使用WOFF和EOT或（ttf/otf）
4.如果你关心更多的IE支持，而不是手机-包括EOT和（1）android、os 4.0的otf回退；反之亦然
*5.如果使用无衬线-不要忘记“sans”（打字）中的“s”，你的页面在Chrome中呈现正常，但在IE中呈现不正常，这会让你发疯
*6.如果使用特殊的谷歌字体样式（如&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 */
}

顺便说一句，你可以通过调用选择器来切换字体，每当属性出现时，新字体就会接管。如果你想坚持使用字体并赋予权重ie-p>。class{font-weight:700；/*不切换字体*/}-仅添加WOFF作为示例，你可以放置任何你想要的字体

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

您可能需要联系主题支持或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 -->


1/10波顿

如果发现有帮助，请投票，因为我是so社区的新成员，由于2个帖子限制，我将无法投稿。感谢
Done和Done@SamuelLiewI，我将字体重量切换为
normal
，但仍然存在相同的问题。我将其更改为.otf字体，并使文本在Chrome和Safari中都可见。现在唯一的问题是在Sa中fari出于某种原因，它将字体加粗。哇，非常感谢。很抱歉，我已经获得了赏金。底部的这个代码片段是什么？是我的代码还是你编辑的？没什么大不了的：）是的，这是你的代码-如果你想复制它，你可以自己查看-（如果你安装了firefox）查找一个名为web developer-generate source的firefox扩展，它可以让你看到脚本在做什么，特别是当它被隐藏起来，一点也不明显的时候，它可能会让人非常沮丧…下面是一个类似于WP主题的例子，另外，你还认为你会对此感兴趣：非常感谢你的帮助告诉你我在移动设备上的固定限制下最终要做什么。希望你能得到你需要的帮助-我不想通过大量使用WP链接来阻止你，但以防Shopify帮不了你-你似乎对你正在做的事情了解得足够多，可以轻松地连接一个通用购物车插件或其他东西