草庐IT

android - @font-face 段落标签渲染问题，Chrome Android 4

coder 2023-12-05 原文

我在 Nexus 7、Android 4 平板电脑上的 Chrome 中遇到了一个奇怪的问题。

当我尝试使用 Web 字体设置 p 标签的样式时，该字体只有在某个 em 或 px 之后才会呈现> 尺寸:

CSS:

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

    p {
        font-size: 16px;
        font-family: 'mija'
    }

还有我的 HTML:

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
    </head>
    <body>
        <p>Hello world</p>
    </body>
</html>

在这种情况下，17px 及以上的任何内容都将正确呈现字体。

这只发生在 p 标签上。所有其他元素都可以毫无问题地呈现任何大小的字体。

我尝试了 3 种不同的字体系列。我没有使用任何规范化文件或任何其他 CSS。

我试图创建一个 fiddle ，但网络字体并未从 Android Chrome 上的 Google 网络服务中提取:

http://jsfiddle.net/yxcec/4/

最佳答案

完全同意这是一个错误，正如@Yahreen 已经回答的那样。

我注意到，虽然我在处理某个网站时遇到了这个问题，但某些页面似乎比其他页面运行得更好。因此，我花了一些时间尝试弄清楚为什么会这样，以及在此期间是否可以使用任何类型的“解决方法”。

我个人在让 Webfonts 在 Android - Nexus S 和 Nexus 7 的 Chrome 上正确呈现时遇到了问题。

我发现，如果您调整元素的宽度，似乎可以在某种程度上解决该错误，并且仍然可以正确呈现 18 像素以下的网络字体。

在附加的示例代码中，似乎一切都适用于 88.8% 的最大宽度。你可以有一个更宽的第一个 DIV 但它会打破下面的那些。一切似乎都只在那个神奇的百分比下工作。对于某些人来说，这可能是一个不错的解决方法。你的里程可能会有所不同，你可能需要使用百分比 - 我需要在响应式布局(gridpak)中稍微调整百分比，但我怀疑它可能仍然符合总体百分比方面的相同逻辑。毕竟这个 bug 的行为很奇怪，但这似乎确实可以将其稳定为某种可用模式，也许这可以帮助您解决问题。

其他人可能会更深入地理解这里的作用，并可能提供更多建议/解释。

您可以在此处查看测试:http://richhollis.github.com/grumpy-wizard-font-test/ 

<!DOCTYPE>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Grumpy Wizards</title>
    <meta name="viewport" content="width=device-width">

    <link href='http://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>

    <style>
      body { font-family: 'Finger Paint', cursive; }
    </style>
  </head>

  <body style="margin:0; padding:0; background-image: url('http://www.thezorklibrary.com/history/image/grumpy_wizard1a.png')">

    <div style="width: 88.8%; background: red; opacity: 0.8">
      <h1>Grumpy wizards make toxic brew for the evil Queen and Jack</h1>
      <h2>Grumpy wizards make toxic brew for the evil Queen and Jack</h2>
      <p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>
      <p style="font-size:18px">18px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
      <p style="font-size:17px">17px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
    </div>

    <div style="width: 88.8%; background: yellow; opacity: 0.8">
      <h1>Grumpy wizards make toxic brew for the evil Queen and Jack</h1>
      <h2>Grumpy wizards make toxic brew for the evil Queen and Jack</h2>
      <p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>      
      <p style="font-size:18px">18px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
      <p style="font-size:17px">17px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
    </div>

    <div style="width: 88.8%; background: purple; opacity: 0.8">
      <h1>Grumpy wizards make toxic brew for the evil Queen and Jack</h1>
      <h2>Grumpy wizards make toxic brew for the evil Queen and Jack</h2>
      <p>Grumpy wizards make toxic brew for the evil Queen and Jack</p>      
      <p style="font-size:18px">18px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
      <p style="font-size:17px">17px Grumpy wizards make toxic brew for the evil Queen and Jack</p>
    </div>    

    <div id="size"></div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <script>$(function(){ 
      $("#size").text("window.innerWidth = " + window.innerWidth);
    });</script>

  </body>
</html>

关于android - @font-face 段落标签渲染问题，Chrome Android 4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12506207/

段落font-facegtlt34androidcssgoogle-chrometablet

有关android - @font-face 段落标签渲染问题，Chrome Android 4的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  4. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  7. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  8. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  9. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  10. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

随机推荐