【问题标题】:Why is use of a certain @font-face causing text involved in CSS3 and jQuery transitions to not be visible in webkit browsers on mac?为什么使用某个 @font-face 会导致涉及 CSS3 和 jQuery 转换的文本在 mac 上的 webkit 浏览器中不可见?
【发布时间】:2013-03-07 05:34:52
【问题描述】:

我正在为我正在开发的网站使用@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 vs Avenir:

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

【问题讨论】:

  • 完成并完成@SamuelLiew

标签: html css macos webkit font-face


【解决方案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 作为示例,你可以放任何你想要的

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

您可能需要联系主题支持或 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 个帖子的限制,我无法贡献。谢谢

【讨论】:

  • 哇,非常感谢。很抱歉,我已经颁发了赏金。底部的代码 sn-p 是什么?是我的代码还是你编辑的??
  • No biggie :) 是的,这是你的代码——如果你想复制它以便你自己看到它——(如果你安装了 firefox)查找一个名为 web developer 的 firefox 扩展——生成来源 - 让你看到脚本在做什么,尤其是当它被隐藏起来并且根本不明显时 - 这可能非常令人沮丧......这是一个类似于 WP 主题的示例,用于响应式站点themetrust.com/demos/gather 另外认为你会对此感兴趣:typeplate.com
  • 非常感谢您的帮助。我将向您介绍我最终如何处理移动设备上的固定限制。
  • 希望你能得到你需要的帮助 - 我不想通过使用 WP 链接来阻止你,但以防万一 Shopify 无法帮助你 - themes.themepunch.com/?theme=revolution_wp - 你似乎知道足够了解您正在做什么以轻松连接通用购物车插件,或者更核心的东西,很多人为 WP 做一些疯狂的事情!如果您正朝着这个方向前进,您可能也有兴趣查看 ithemes.com - 祝您的网站好运!
  • 哈哈实际上我只是将我们的网站从 WP 移至 Shopify,主要是因为购物车非常棒且无忧。我尝试了一些 WP 购物车插件,有些好,有些不好,但没有一个提供 Shopify 提供的自动化和无忧体验。如果我只是为我的公司做 Web 开发,我可能会坚持使用 WP,但由于我正在做从客户服务到履行的所有事情,所以我选择了最耗时的解决方案。再次感谢您的帮助!
【解决方案2】:

四处打听,一件事跳出来:

@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");
}

您已经列出了格式为“opentype”(otf) 的 TrueType 字体 (.ttf)。我无法在 Chrome 的开发工具中找到远程更改它的方法,以查看是否可以修复它,但这看起来是一个合理的原因。

一个ttf文件是truetype格式:

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

【讨论】:

  • 我将它更改为 .otf 字体,它使文本在 Chrome 和 Safari 中都可见。现在唯一的问题是,在 Safari 中,由于某种原因,它会加粗字体。
【解决方案3】:

我注意到您正在使用带有 font-weight: 600 的“AvenirLight”,这是一个粗体,并且同时使用浅色字体 + 粗体可能无法与 Mac webkit 浏览器正确兼容/实现。首先尝试使用普通的font-weight 进行测试。

【讨论】:

  • 我将字体粗细切换到normal,但还是同样的问题。
【解决方案4】:

我很好奇你是否知道为什么嵌入的字体看起来很粗。我之前遇到过这个问题,但没有意识到是什么原因造成的。

我会尝试通过 Font Squirrel 运行您的字体,以确保您嵌入了所有正确的字体格式(eot、ttf、otf、woff、svg),以便您的网站是跨浏览器友好的。您可能已经这样做了,但在您的代码中我只看到了 ttf/otf。

http://www.fontsquirrel.com/tools/webfont-generator

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-03-06
    • 2012-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-20
    • 2023-04-11
    • 2012-12-31
    相关资源
    最近更新 更多