Chrome浏览器的字体渲染打破布局 [英] Chrome svg-Font-Rendering breaks Layout

问题描述

我目前正在一个小工程中使用webfonts 通过@fontface 。

我实现了字体是这样的：

pre $ font-family：'CardoRegular';
src：url（'../ fonts / Cardo104s-webfont.eot'）;
src：url（'../ fonts / Cardo104s-webfont.eot？#iefix'）format（'embedded-opentype'），
url（'../ fonts / Cardo104s-webfont.woff ''）格式（'woff'），
url（'../ fonts / Cardo104s-webfont.ttf'）格式（'truetype'），
url（'../ fonts / Cardo104s-webfont .svg＃CardoRegular'）格式（'svg'）;
font-weight：normal;
font-style：normal;

现在，您可能已经遇到了Chrome浏览器在顺利显示字体时出现问题。 / strong>

p>

经过一番搜索之后，我发现了一个似乎可行的解决方案：您只需移动这部分的css即可：

<$ p $ （''/ fonts / Cardo104s-webfont.svg＃CardoRegular'）格式（'svg'）;

所以你最终得到这个：

  @ font-face {
 font-family：'CardoRegular'; 
 src：url（'../ fonts / Cardo104s-webfont.eot'）; 
 src：url（'../ fonts / Cardo104s-webfont.eot？#iefix'）format（'embedded-opentype'），
 url（'../ fonts / Cardo104s-webfont.svg （''/ fonts / Cardo104s-webfont.woff'）格式（'woff'），
 url（'../ fonts / Cardo104s（'svg'），
 url -webfont.ttf'）格式（'truetype'）; 
 font-weight：normal; 
 font-style：normal; 
  

现在Chrome以平滑的方式呈现字体，这非常棒。

但是： b
$ b

由于某些原因，这个有时打破了布局。大约每三次我加载页面我会得到这样的东西：

一切都移到左边。更长的文本正在打破它们的容器。看起来很奇怪。

**有没有人遇到过这个问题？

我很乐意得到建议**

请随时为自己寻找：
在线观看Fireflycovers.com

非常感谢！

解决方案

不是把svg放在顶部，而是保持原始的格式，但是，添加媒体查询，如下所示。这将使铬完全渲染字体，并修复布局中断。

  @ font-face {
 font-family ：'CardoRegular'; 
 src：url（'../ fonts / Cardo104s-webfont.eot'）; 
 src：url（'../ fonts / Cardo104s-webfont.eot？#iefix'）format（'embedded-opentype'），
 url（'../ fonts / Cardo104s-webfont.woff ''）格式（'woff'），
 url（'../ fonts / Cardo104s-webfont.ttf'）格式（'truetype'），
 url（'../ fonts / Cardo104s-webfont .svg＃CardoRegular'）格式（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
 
 $ b @media屏幕和（-webkit-min-device-pixel-ratio：0）{
 @ font-face {
 font-family：' CardoRegular; 
 src：url（'../ fonts / Cardo104s-webfont.svg＃CardoRegular'）format（'svg'）; 
 
} 
} 
  

I'm currently working on a little Project in which I'd like to use webfonts via @fontface.

I implemented the font's like this:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

Now as you have probably experienced Chrome has problems displaying these fonts in a smooth way.

After some searching I found a solution which seem to work: You simply move this part of the css:

    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

So you end up with this:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

Now Chrome renders the Fonts in a smooth way, which is great.

BUT:

For some reason this SOMETIMES breaks the Layout. About each third time I load the page I'll get something like this:

Everything is moved to the left. Longer texts are breaking out of their containers. Looks really strange.

**Has anyone experienced this problem before?

I would be happy to get advice on this.**

Feel free to take a look for yourself: View Fireflycovers.com online

Thanks a lot!

解决方案

I have had this exact issue happen to a website of my own.

Instead of putting the svg at the top, keep the original formatting but add a media query as shown below. This will make chrome render the fonts perfectly and fixes the layout breaking.

@font-face {
   font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CardoRegular';
        src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

    }
}

这篇关于Chrome浏览器的字体渲染打破布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！