演示: http: //jsbin.com/onixik/2 (内容如下)
如果您在 Windows 上的 Chrome 中查看该演示,它可能看起来正常,也可能不正常。“OK”是指它不起眼,只是一些文字。如果不行,则部分文字覆盖其他文字;这很明显。
如果 Chrome 让它看起来不错,然后尝试随机调整窗口大小几次。奇怪的是,一旦它开始出错,就很难(也许不可能)让浏览器重新开始正确显示它。(编辑——与我一起工作的一些人像我一样看到了这个问题,但他们的浏览器随后开始工作,就像我的最终所做的那样;也许你们中很少有人会看到它。)
这是“不正常”时的样子:
(字体是 Signika;它是 Google、FontSquirrel 和 Adobe 提供的免费字体。我将它托管在我自己的服务器上,因为 Google 不会提供 SVG,或者我不知道如何制作它。您将无法在 Firefox 中看到任何内容,因为我没有提供正确的 CORS 标头并且 Firefox 很挑剔。)
我知道如何解决这个问题:在 SVG 文件之前提供 WOFF 文件。但是,我目前首先提供 SVG 文件,因为我在各种博客(以及此处的问题)上一遍又一遍地阅读 Chrome 渲染 SVG 比 WOFF 更好。在这种情况下,这显然不会发生 :-) 有没有人看到这个并找到了另一种解决方法?
的HTML:
<div style='position: relative'>
<div class=wf style='font-size: 135%'>
Hello This is a test of some formatting issues
<span style='margin-top: -3px; font-size: 120%'>*</span>
The problem is strange.
</div>
</div>
CSS:
@font-face {
font-family: 'Signika';
src: url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.eot#') format('embedded opentype'),
url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.svg') format('svg'),
url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.woff') format('woff'),
url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.ttf') format('truetype');
}
.wf {
font-family: "Signika";
font-weight: normal;
padding: 2em;
max-width: 12em;
}