Chrome使用SVG格式的网页字体（有时） [英] Chrome jumbles text styled with a web font in SVG format (sometimes)

问题描述

演示： http://jsbin.com/onixik/2（内容如下）

如果您在Windows上的Chrome中查看演示，它可能看起来不错，或者它可能不会。通过确定我的意思是它不起眼，只是一些文字。如果不行，那么部分文本会覆盖其他文本;这是非常明显的。

如果Chrome使它看起来不错，那么尝试随机调整窗口大小几次。奇怪的是，一旦它开始出错，真的很难（也许不可能）让浏览器再次正确地显示它。 （ edit —我一起工作的一些人看到了问题，就像我一样，但他们的浏览器后来开始工作，就像我最终做的一样;也许很少有人会看到它。）

下面是它的不正确时的样子：
因为Google不会为SVG提供服务，或者如果我不知道如何制作它，你将无法在Firefox中看到任何内容，因为我没有提供正确的CORS头文件，并且Firefox很挑剔。）

我知道如何解决这个问题：在SVG文件之前提供WOFF文件。然而，我目前正在为SVG文件服务，因为我已经在各种博客（以及这里的问题）上反复阅读了Chrome浏览器呈现SVG比WOFF更好的内容。在这种情况下，这显然没有发生:-)有没有人看到这个，并找到另一种解决方法？

HTML：

 < div style ='position：relative'> 
< div class = wf style ='font-size：135％'> 
你好这是一些格式化问题的测试
< span style ='margin-top：-3px; font-size：120％'> *< / span> 
这个问题很奇怪。 
< / div> 
< / div> 
  

CSS：

  @ font-face {
 font-family：'Signika'; 
 src：url（'http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.eot#'）格式（'embedded opentype'），
 url（'http：// gutfullofbeer。 net / fonts / Signika-Semibold-webfont.svg'）格式（'svg'），
 url（'http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.woff'）格式（'woff '），
 url（'http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.ttf'）格式（'truetype'）; 
} 
 
 .wf {
 font-family：Signika; 
 font-weight：normal; 
填充：2em; 
最大宽度：12em; 
} 
  

解决方案

Chrome似乎存在问题字体和文本。我也有这个问题，只有我的文本扭曲，它是一个付费字体。不知道它为什么这样做，但我最终尝试通过谷歌字体尝试不同的字体，并且它可以在所有4种浏览器上运行。

请尝试在Google字体上找到符合您需要的字体，然后使用它。使用起来更容易，而且您不必将所有这些不同的格式加载到服务器中，只需从标题中的标记中从Google网站中提取即可。不需要CSS。

Demo: http://jsbin.com/onixik/2 (contents are below)

If you check that demo in Chrome on Windows, it may look OK or it may not. By "OK" I mean that it's unremarkable, just some text. If it's not OK, then part of the text overwrite other text; it's pretty obvious.

If Chrome is making it look OK, then try resizing the window randomly a few times. Oddly, once it starts being wrong, it's really hard (maybe impossible) to get the browser to start showing it properly again. (edit — some people I work with saw the problem just like I did, but their browsers subsequently started working, like mine eventually did; perhaps very few of you will see it.)

Here's what it looks like when it's "not OK":

(The font is Signika; it's a free font available from Google, FontSquirrel, and Adobe. I'm hosting it on my own server because Google won't serve SVG, or if it will I don't know how to make it. You won't be able to see anything in Firefox because I'm not serving the right CORS header and Firefox is picky.)

I know how to fix this: serve the WOFF file before the SVG file. I'm currently serving the SVG file first, however, because I've read over and over again on various blogs (and questions here) that Chrome renders SVG better than WOFF. In this case, that's clearly not happening :-) Has anybody seen this and found another workaround?

The 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>

The 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;
}

解决方案

Chrome seems to have issues with font and text. I also had that issue, only mine was warping the text and it was a paid font. Not sure why it does this, but I ended up trying a different font through google-fonts and it worked on all 4 browsers.

Try finding a font on google fonts that matches what you want and use it instead. It's much easier to use and you don't have to load all those different formats into your server, it just draws from the google site from a tag in the header. No CSS needed.

这篇关于Chrome使用SVG格式的网页字体（有时）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！