eno*_*ciw 65 html css google-chrome google-webfonts
我正在构建一个新的WordPress主题(不知道这是否相关)并且这个问题一直困扰着我.
我已经从Google Webfonts加载了Roboto Slab(包括CSS <head>部分).在其他所有浏览器上,除了谷歌浏览器外,字体呈现正常.当我第一次在谷歌浏览器中加载网站时,使用该自定义字体的文本不会全部显示(即使字体堆栈具有格鲁吉亚作为后备 - "Roboto Slab", Georgia, serif;).在我悬停样式链接或重新触发Inspector中的任何CSS属性后 - 文本变得可见.
自从我前段时间开始这个主题以来,我可以清楚地记得它之前完美无缺.这是最近一些已知的Chrome更新错误吗？
首次加载: 截屏#1
在我重新应用任何CSS属性后,进入响应式视图或悬停元素: 屏幕截图#2
有人有类似的问题吗？我该怎么办呢？
谢谢!
Meg*_*Meg 88
显然这是一个已知的Chrome漏洞.有一个仅限css的解决方法可以解决问题:
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
似乎只需要告诉Chrome重新绘制文本
CSS修复对我来说不起作用,0.5秒延迟脚本似乎也很尴尬.
这个JS片段似乎对我们有用:
<script type="text/javascript">
jQuery(function($) {
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
$('body').css('opacity', '1.0')
}
})
</script>
如果第一个评级的帖子不起作用,这是一个解决方案:
删除'http:':
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
要么
@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);
正如David Bain所解释的那样,大多数现代浏览器实际上并不要求您指定协议,它们将根据您调用它的上下文"推断"协议.
单独尝试css修复没有成功.最后通过创建一个包含以下内容的样式表(chrome.css)来解决:
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
@@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
并在页面底部使用jquery加载它:
<script type="text/javascript">
$(document).ready(function () {
$('head').append('<link href="/chrome.css" rel="stylesheet" />');
});
</script>