我有一个使用CSS3的网站
@font-face {
font-family: 'LigatureSymbols';
src: url('LigatureSymbols-2.07.eot');
src: url('LigatureSymbols-2.07.eot?#iefix') format('embedded-opentype'),
url('LigatureSymbols-2.07.svg#LigatureSymbols') format('svg'),
url('LigatureSymbols-2.07.woff') format('woff'),
url('LigatureSymbols-2.07.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LigatureSymbols';
src: url('LigatureSymbols-2.07.svg#LigatureSymbols') format('svg');
font-weight: normal;
font-style: normal;
}
在我的代码中指定的字体不会显示我第一次访问网站(仅在Google Chrome中),即使我按下链接转到另一个页面,它也不会正确更新字体。只有当我按下F5键更新网站时,它才会呈现正确的字体。尝试了很多不同的修复可能对这个问题有影响,没有运气(这就是为什么我有2 @font-face…)
我已经没有选择了,希望有人能在这个问题上帮助我。
solution:
我发现问题根本不在我的CSS文件中。
结果是,在我的index。php文件中,我在网页中使用的字体来自googleapis.com网站,像这样:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
和在这个"CSS"文件中,字体URL没有封装在:' ' <——these中。这似乎是谷歌Chrome浏览器的一个大问题。
我把googleapis.com生成的CSS文件的内容放在我自己的CSS文件中,并封装了URL。现在它工作得很好!