草庐IT

android - @font-face 不适用于 Chrome for Android

coder 2023-12-19 原文

我正在尝试在移动网络应用程序中使用 @font-face，但它无法在 Android 版 Chrome 上运行。

它是致力于以下工作:

  • iOS 上的 Safari
  • 默认安卓浏览器
  • OSX 上的 Safari
  • Windows 上的 Chrome
  • Windows 上的火狐
  • Windows 上的 IE11

这是我使用的代码:

@font-face {
    font-family: 'liat';
    src: url('../fonts/liat_3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

我正在使用远程调试 ( https://developers.google.com/chrome-developer-tools/docs/remote-debugging ) 对此进行调试，但似乎没有任何错误。

这是我真的不明白的部分...

如果我转到开发人员工具中的“网络”选项卡 - Chrome 似乎没有尝试下载字体(即，没有网络调用来加载字体)

将其与我在台式机(Windows 和 OSX)上的 Chrome 中看到的进行比较 - 您可以看到字体已加载:

此外 - 如果我转到“资源”选项卡 - 它不显示任何字体。

将其与我在桌面版 Chrome 中看到的进行比较:

底线 - 在桌面版 Chrome 上(以及 iOS 上的移动版 Safari)- 加载并显示网络字体。但是，在 Android 版 Chrome 上 - 网络字体甚至没有加载，更不用说显示了。

非常感谢任何帮助或建议!

最佳答案

好的 - 所以我找到了答案。也许这对很多人来说并不奇怪......

长话短说 - 网络字体仅用于某些最初设置为 display: none 的 div。

看起来大多数其他浏览器会自动下载网络字体，即使显示它们的 div 没有显示。但是，Android 版 Chrome 似乎不会下载它们。

更糟糕的是 - 如果我稍后将这些 div 的显示更改为可见的内容(例如，dislay: block) - Chrome 仍然不会 下载它们 -它们根本不会显示。

换句话说 - 字体必须包含在最初包含在渲染树中的元素中，否则它们将永远不会被下载。

为了解决这个问题 - 我在临时 div 中包含了带有 visibility:hidden 的字体 - 这迫使 Chrome 下载字体。

希望这可以帮助其他人避免遇到同样困扰我的问题。

关于android - @font-face 不适用于 Chrome for Android，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21841250/

font-faceandroidChromestrongsectioncssgoogle-chromewebfonts

有关android - @font-face 不适用于 Chrome for Android的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby - inverse_of 是否适用于 has_many？ - 2

    当我使用has_one时，它​​工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  4. ruby-on-rails - 在 heroku 的 .fonts 文件夹中包含自定义字体，似乎无法识别它们 - 2

    Heroku支持人员告诉我，为了在我的Web应用程序中使用自定义字体(未安装在系统中，您可以在bash控制台中使用fc-list查看已安装的字体)我必须部署一个包含所有字体的.fonts文件夹里面的字体。问题是我不知道该怎么做。我的意思是，我不知道文件名是否必须遵循heroku的任何特殊模式，或者我必须在我的代码中做一些事情来考虑这种字体，或者如果我将它包含在文件夹中它是自动的......事实是，我尝试以不同的方式更改字体的文件名，但根本没有使用该字体。为了提供更多详细信息，我们使用字体的过程是将PDF转换为图像，更具体地说，使用rghostgem。并且最终图像根本不使用自定义字体。在

  5. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  6. ruby - "undefined method"用于 rails 模型 - 2

    我正在使用带有Rails的Devise，我想添加一个方法“getAllComments”，所以我这样写:classUser在我的Controller中:defdashboard@user=current_user@comments=@user.getAllComments();end当我访问我的url时，我得到了undefinedmethod`getAllComments'for#我做错了什么？谢谢 最佳答案 因为getAllComments是一个类方法，而您正试图将其作为实例方法访问。您要么需要访问它:User.getAllCom

  7. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  8. ruby-on-rails - Ruby "Undefined Method"用于类方法 - 2

    Ruby初学者努力简单地将这个@@people散列的值打印到控制台classPerson#haveafirst_nameandlast_nameattributewithpublicaccessorsattr_accessor:first_nameattr_accessor:last_name#haveaclassattributecalled`people`thatholdsanarrayofobjects@@people=[]#havean`initialize`methodtoinitializeeachinstancedefinitialize(first_name,last_

  9. python - 用于 Python 或 Ruby 的 Amazon Book API？ - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:AmazonAPIlibraryforPython?我正在寻找一个AmazonAPI，它可以让我:按书名或作者查找书籍显示书籍封面获取有关每本书的信息(价格、评级、评论数、格式、页数等)Python或Ruby库都可以(我只想要最容易使用的库)。有什么建议么？我知道在SO上还有其他一些关于此的帖子，但这些API似乎很快就过时了。[几个月前我尝试了几个建议的Ruby库，但无法让它们中的任何一个工作。]

  10. ruby-on-rails - 用于门户的 Ruby 技术 - 2

    我刚刚看到whitehouse.gov正在使用drupal作为CMS和门户技术。drupal的优点之一似乎是很容易添加插件，而且编程最少，即重新发明轮子最少。这实际上正是Ruby-on-Rails的DRY理念。所以:drupal的缺点是什么？Rails或其他基于Ruby的技术有哪些不符合whitehouse.org(或其他CMS门户)门户技术的资格？ 最佳答案 Whatarethedrawbacksofdrupal?对于Ruby和Rails，这确实是一个相当主观的问题。Drupal是一个可靠的内容管理选项，非常适合面向社区的站点。它

随机推荐