【问题标题】:CSS not displaying font very wellCSS不能很好地显示字体
【发布时间】:2011-10-05 00:40:43
【问题描述】:

每次写一个简单的字体规则并尝试显示输出时,我的文本字体有点问题,文本显示得不是很好。它通常看起来很模糊。该字体在 Mozilla Aurora 浏览器中正确显示,但在较新版本的 Google Chrome 和 Firefox 中显示不佳。请问有谁知道这个文字效果的原因是什么

在这两个示例中,您可以观察到文本较粗的一个是 Aurora,而文本较暗的一个是 Chrome。这两个具有相同的样式规则,并且具有不同的输出。请问,这个问题的最佳解决方案是什么。

【问题讨论】:

  • 不同的浏览器呈现不同的字体。恐怕没有办法解决这个问题。你用的是什么字体?
  • font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  • 我尝试将此文本放入正确呈现的样式规则中,并提供正确的输出,但如果我将其设为独立,它会以这种方式呈现
  • “我尝试将此文本放入正确呈现并提供正确输出的样式规则中,但如果我将其单独制作,它会以这种方式呈现” - 你迷路了。
  • @PaulD.Waite 我的意思是我在一个样式规则中尝试了它,它给了我正确的输出并且它工作正常。但是当我尝试自己显示它时,它定义了自己的规则,它给了我上面的输出

标签: css webfonts


【解决方案1】:

每个渲染引擎、Webkit、Mozilla、Trident 等都是由不同的团队创建的,因此在输出以及其自身的怪癖或错误方面会有细微差别。

每个浏览器、Firefox、Safari、Aurora、Chrome、Explorer 等都是由不同的团队创建的,因此在使用所选渲染引擎的方式以及自身的怪癖或错误方面会略有不同。

每个操作系统都可以这样说,以及它如何处理相同的字体。

我在一个非常漂亮的高分辨率 LCD 显示器上,您的图像中这两种情况之间的差异几乎无法察觉。如果不是将它们并排放置,几乎不可能区分它们。我认为如果您将测试用例放在两个并排的 LCD 显示器上,则不会有明显的差异。

无论您做什么,所有浏览器都会以不同的方式呈现事物。作为程序员,我们的工作是仅在实际和可能的情况下减少这些差异。

【讨论】:

    【解决方案2】:

    不同的浏览器有不同的行为。

    我建议使用 JavaScriptCSS 来解决这个问题。 JavaScript 检测最终用户使用的浏览器,然后该浏览器的 CSS 代码

    JavaScript 浏览器检测(点击下面的链接):http://www.w3schools.com/js/js_browser.asp

    自定义字体文本的粗体(使用此代码):font-weight:500;

    “font-weight”的数字越大越粗。

    【讨论】:

    • -1 用于链接到 W3Schools 以及针对这样一个微不足道的问题提出这种过于复杂的解决方案。浏览器、版本、操作系统、安装字体等的组合实际上是无限的。您的解决方案将需要特殊的 CSS 来处理无法测试的情况。头脑正常的人不会尝试这样做。
    猜你喜欢
    • 2019-12-05
    • 2015-08-25
    • 2012-04-22
    • 1970-01-01
    • 2013-07-17
    • 2016-12-17
    • 2014-12-03
    • 1970-01-01
    • 2016-01-20
    相关资源
    最近更新 更多