使用font-face时的随机字母间距 [英] Random letter spacing when using font-face

问题描述

我使用这样的CSS：

  @ font-face {
 font-family：Chocolat; 
 src：url（'../ fonts / chocolat.eot'）; 
 src：url（'../ fonts / chocolat.eot？#iefix'）format（'embedded-opentype'），
 url（'../ fonts / chocolat.woff'）format 'woff'），
 url（'../ fonts / chocolat.ttf'）format（'truetype'）; 
 font-weight：normal; 
 font-style：normal; 
} 
 
 html，
 body 
 {
 line-height：1; 
 margin：0; 
 padding：0; 
 font：15px Chocolat，Arial，Helvetica，sans-serif; 
 color：＃000000; 
} 
  

大部分时间在IE7，IE8，IE9和最新版本的FireFox和Chrome。每次加载页面几次，页面的一些或全部将具有每个字母之间的间距关闭的区域。有时两个字母挤在一起，然后下两个字母有很多额外的空间（几个像素，但明显和丑陋）。我不积极，但我认为它只发生在IE8，可能在兼容性模式，也不是。

我没有办法打开其他格式，但是当我在Windows中打开TTF格式时会说OpenType在标题区，但后来在细节上说OpenType Layout，TrueType Outlines。

另一个devloper建议使用。我不知道如何创建字体，我只是从艺术家那里得到的，然后用fontsquirrel.com创建其他。 letter-spacing 但这只是在看起来很好，而不是当它在这个随机字母间距模式。

编辑：添加了照片

只需点击网站，有时页面加载看起来像这样（这是IE8不兼容模式）。看看单词开始的S和t非常紧。然后单词什么在W和h之间有太多的空间。在右侧，获奖一词看起来与下一张图片非常不同。在右边的日期看起来那么糟糕，我甚至不会认为会有一个CSS设置，将让你这样做 - 它会叫什么？ make-my-page-awful：true;

我所做的就是按F5重新加载页面，看起来不错：

img src =https://i.stack.imgur.com/F8fjt.pngalt =好字母间距>

解决方案

更改：

  html，
 body 
 {
 line-height： 1; 
 margin：0; 
 padding：0; 
 font：15px Chocolat，Arial，Helvetica，sans-serif; 
 color：＃000000; 
} 
  

：

  html，
 body 
 {
 line-height：1; 
 margin：0; 
 padding：0; 
 font：15px Chocolat; 
 color：＃000000; 
} 
  

所以只是字体：行，似乎已经解决了问题。 p>

我猜，IE8必须使用一种备用字体（可能是Arial）进行一些初始布局计算，然后尝试调整（以一种糟糕的方式）。我会假设，如果它是第一页面加载，但这不是当它发生。它发生在几乎随机的时间之后。在应用修复之前，我可以使用这些步骤重新创建：

1. 打开主页 -




2. 点击主页面上刚刚重新加载同一页面的链接（如果我使用F5刷新）。

- 此时，字体看起来真的很糟糕，
$ b

1. 再次点击相同的链接

完美

我可以关闭并重新打开浏览器，或者直接点击F5，然后重复上述步骤，每次都有相同的结果。

更改了CSS中的一行，现在无法重新创建。

I'm using CSS like this:

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

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

The page looks correct most of the time in IE7, IE8, IE9, and latest versions of FireFox and Chrome. Every few times a page loads, some or all of the page will have areas where the spacing between each letter is off. Sometimes 2 letters are crammed together, and then the next 2 letters have lots of extra space (a few pixels, but obvious and ugly). I'm not positive but I think it is only happening in IE8, and possibly in compatibility mode and also not. It's pretty random so hard to check quickly right now.

I have no way to open the other formats, but when I open the TTF format in Windows it says "OpenType" in the title area, but then in the details says "OpenType Layout, TrueType Outlines". I know very little about creating fonts, I just got this from the artist and then used fontsquirrel.com to create the others.

Another devloper recommended letter-spacing but that only seems to help when things are looking good, not when it gets in this random letter spacing mode.

Edit: Added photos

Just clicking around the site sometimes the page loads looking like this (this was IE8 not in compatibility mode). Look at the word "Start" the S and t are very tight. Then the word "What" there is too much space between W and h. On the right side, the word "Awarded" also looks very different than in the next image. The date on the right side looks so bad I wouldn't even think there would be an CSS setting that would let you do that -- what would it be called? make-my-page-awful: true;

All I did was press F5 to reload the page and it looks good:

解决方案

Changing this:

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

to this:

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat;
    color: #000000;
}

So just the font: line, seems to have fixed the issue.

I'm guessing IE8 must be doing some initial layout calculations using one of the fallback fonts, probably Arial, and then trying to adjust (in a bad way). I would have assumed that if it was the very first page load, but that isn't when it happens. It happens at some almost random time after that. I was able to recreate everytime with these steps before I applied the fix:

1. Open main page -- at this point fonts looked pretty good, maybe slightly smaller than they should be.

2. Click link on main page that just reloads same page (didn't happen if I used F5 to refresh).

--at this point, fonts looked really bad, like my example above

1. Click same link again

--at this point fonts looked perfect

I could close and reopen the browser, or just hit F5, then repeat the above steps over and over with same results every time.

Changed the one line in the CSS, and now unable to recreate.

这篇关于使用font-face时的随机字母间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！