对于每个字体声明,使用相同的字体系列名称 - 在你的情况下,Avenir - 设置你的字体声明,如下所示。你最好使用 woffs 有两个原因——一个是你可以用一个好的转换器将你的 woffs 降低到大约 20k,每个都可以浏览你的页面加载,另一个是随时使用工作站字体——它可能会给你一种“错误”的印象您的字体在实际上不工作时正在工作 - (想想上次您将文档发送到打印机并且它回来看起来不像预期的那样,即通过打印服务器发送,不支持字体)另外,由于整个版权问题pre 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 用于 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 个帖子限制而无法贡献。谢谢