相关疑难解决方法(0)

我有我的网站,我在这里创建,它看起来不错(现在CSS3媒体查询不适用于IE)但我发现我的@font面孔坏了,看起来像Chrome for Windows中的废话(到目前为止,这是唯一的主要一个我发现的).

我已经搜索过了,发现CSS3 rbg修复本应该可以工作,但它对我没有任何作用.保罗爱尔兰的防弹修复然后我的字体在Android中断了.我几个小时以来一直在研究这个问题,但似乎找不到任何可行的方法.我听说过Cufon,但我正试图坚持使用@font face,因为它只是针对Chrome而我遇到了这个麻烦.

我去了字体松鼠并获得了我正在使用的字体的字体工具包,所以它看起来像这样

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

}

它适用于大多数浏览器(我再也没有机会测试每一个浏览器,但我已经在IE 6-9上检查过它看起来不错,FF 9用于Windows,FF 8用于OSX,Safari Opera和它看起来很棒.用于Windows的Chrome浏览器与@font face命令不兼容.

有没有人建议我可以做些什么来使它看起来更好或修复它？(除了删除@font face类和使用常规字体.)

另外,我最终可以使用Chrome中的条件评论来查看常规字体但是我的HTML不会验证是吗？

所以任何帮助将不胜感激..

嗨,

我想知道是否有办法以某种方式强制Chrome(包括Safari和Opera)渲染@font-face更好的加载字体？我不确定它是否仅仅是这两种字体,但我真诚地怀疑它.

顶部快照是Firefox 8中文本的呈现.下面的一个是来自Chrome(16).现在,这不会打扰我的多,如果它是在IE渲染要命,太-但在IE它呈现很奇妙(与之相似于FF).

所以,我确实尝试了一些事情:

1. 试着申请text-shadow.它让它看起来好一点,但仍然非常糟糕.
2. 我尝试过使用-webkit-font-smoothing: antialiased,但这似乎没有任何影响.

现在,我可以不再是一个令人烦恼的完美主义者而只是使用一个图像作为徽标(因为较小的文本不会表现得那么糟糕,但仍然很糟糕,请注意)并完成它.

我真的不喜欢这个解决方案,但如果没有其他解决方案,我会接受它.

谢谢!

我确信之前已经讨论过,但我找不到任何规范的问题/答案.

目前,IE9和Firefox 4+都使用不同的字体渲染,产生(对某些人来说)更模糊的字体,但总体上更好的字距和更一致的结果.此外,它在Windows上呈现非标准字体要好得多.我还没有做过彻底的调查,但我认为它与IE9和Firefox现在使用不同的图形层这一事实有关,这显然会使字体呈现不同的形式.此外,一些标准字体(如Arial,Tahoma等)在Firefox中与10年前相同的原因是它实际上有一个例外列表(寻找gfx.font_rendering.cleartype_params.force_gdi_classic_for_families).

到现在为止还挺好.问题是Chrome.它仍然使用旧的字体渲染,使非标准字体几乎无法使用.仅举例说明,我想到的字体是:http://www.google.com/webfonts/specimen/Play.只需在Firefox/IE9和Chrome中打开示例,您就应该看到差异.有什么我能做的吗？或者我应该寻找更优化的字体.

更新:我认为这是一个常见问题:http ://www.smashingmagazine.com上的标题在Chrome中看起来非常锯齿.

更新:示例图片:

使用Less我按如下方式定义字体系列:

@georgia: georgia, times, 'times new roman', 'nimbus roman no9 l', serif; 

然后我有更少的mixin:

.font(@family: arial, @size: 1.0em, @lineheight: 1.0, @weight: normal, @style: normal, @variant: normal) {
  font: @style @variant @weight @size~"/"@lineheight @family;
} // font

最后我像这样使用它:

p {
  .font(@georgia, 1.0em, 1.5)
}

但我还想用自定义字体定义字体系列:

@something: 'custom-font', arial, ...;

但首先我需要注册自定义字体:

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

是否可以创建一个LESS mixin,@font-face因此我可以传递字体名称和路径并注册字体而不重复所有这些代码？

我不知道如何将其与我的字体混合...

或者,如果有更好的方法来做到这一点......

谢谢你,米格尔

我@font-face在CSS 中遇到了麻烦.我使用的字体在每个浏览器中看起来都非常不同.

在Firefox中查看此示例:

在Chrome中:

我不知道是什么原因引起了这个问题.我已经尝试使用text-rendering,我也尝试url在@font-face声明中更改-properties 的顺序.

我使用的是Windows 7 Professional和Firefox V30.

有人可以告诉我这个问题的原因,并告诉我如何解决它？

非常感谢.

//编辑:这是@font-face我正在使用的声明:

@font-face {
    font-family: 'MyFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix') format('embedded-opentype'),
        url('myFont.svg#myfont') format('svg'),
        url('myFont.woff') format('woff'),
        url('myFont.ttf') format('truetype');
    font-style: normal;
    font-weight : normal;
}

正如我上面所写,我已经按照这个命令的顺序玩了.

在我的特定问题中,您可以看到此页面(页脚)显示问题.

我使用font-squirrel将字体嵌入到网站上(选择了Apply Hinting),并且在Chrome v15.0 for PC中无法正确呈现.字体显示,但很差.我确定font-squirrel给了我正确的代码,所以我认为我的CSS存在冲突.在此先感谢您的帮助.

链接到网站

@font-face {
    font-family: 'RockwellStd-Light';
    src: url('rockwellstdlight-webfont.eot');
    src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('rockwellstdlight-webfont.woff') format('woff'),
         url('rockwellstdlight-webfont.ttf') format('truetype'),
         url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg');
    font-weight: lighter;
    font-style: normal;

}

h1 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:34px;
    color:#407d3b;
    font-weight:lighter;
    margin-left:20px;

}

h2 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:32px;
    color:#ece1af;
    font-weight:lighter;
    line-height:42px;

}

h3 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:20px;
    color:#FFF;
    font-weight:lighter;

}

p {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:14px;
    line-height:17px;
    color:#333;
    text-align:justify;

}

.criteria_table {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:14px;
    color:#FFF;

}

我正在使用IconMoon @ font-face图标字体来处理我正在进行的项目.

当仅包含.svg和/或.eot字体时,或者在使用其他浏览器(如IE9)浏览时,字体很好并且流畅地呈现.但是当使用Chrome浏览网站并包含.ttf和/或.woff格式时,图标会变得非常不连贯并且根本没有抗锯齿.有没有办法告诉Chrome加载.eot或.svg而不是.ttf或.woff？

我注意到,如果尺寸是,例如,字体的渲染会有很大差异.11像素.运行Windows 7

使用以下HTML和CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testing font</title>
        <style>
            body {
                font-family: "Helvetica","Arial",sans-serif;
                color: #1A1A1A;
                padding: 10px;
            }

            .foo{
                font-size: 14px;
            }
            .bar{
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <div class="foo">
                <p>HOME</p>
        </div>
        <div class="bar">
                <p>HOME</p>
        </div>
    </body>
</html>

如附图所示,FF和Chrome倾向于收紧11px的宽度而不是14px.

为什么会这样,是否有解决方法？

我正在使用启用了ClearType的Windows 7.

在我的网站上,我使用的是谷歌字体中的"Happy Monkey"字体.

在我的笔记本电脑(谷歌浏览器的最新版本)上,它看起来根本没有抗锯齿,而在我的Nexus 4(使用Chrome)上,它看起来非常流畅,就像在Google字体网站上一样.

我试着font-smooth: auto;在body我的样式表,但它仍然不是很清楚.

可能是因为笔记本电脑的分辨率与手机相比(1366x768,15.6"vs 1280x768,4.7")？

即使我完全放大我的Nexus,你根本看不到一个锯齿状边缘,它完全光滑.

我的字体声明

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);

body {
    font: 14px 'Happy Monkey';
    font-smooth: auto; // tried with and without this
}