logo标签列表

字体家族Roboto和"Roboto Lt"在iPhone 5s上无法正常工作

cssiphonesafari
3

我使用CSS属性font-family，将值设置为Roboto和"Roboto Lt"。当我使用Android手机浏览页面时，font-family有效，但在iPhone 5s通过Safari浏览器浏览页面时无效。

有人遇到过这个问题吗？

2个回答
2

Roboto是Android中包含的字体，但不是iOS中包含的字体。您需要在Google Fonts中包含此字体。

那我该如何在iOS上包含字体？使用内联的Google字体，在head标签中吗？ - jamesxu-e.g.
是的。这是最好的方法。 - jordans
2
嗨，Jordans。我已经通过代码包含了字体：<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>，就像谷歌的例子一样，但它在 iPhone 5s 上仍然不起作用。 - jamesxu-e.g.
1

我希望这个答案可以帮助其他遇到类似问题的人，就像我遇到的一样。 以下是我的解决方案，您可以按照以下步骤操作。

  • 步骤1：首先，请访问此链接[ http://www.fontsquirrel.com/fonts/roboto]下载压缩文件。您应该选择Webfont Kit选项卡，然后单击“Download @font-face Kit”按钮以下载压缩字体文件。

  • 步骤2：完成步骤1后，您必须解压已下载的压缩文件，并将未压缩的文件选择到当前目录。因此，您将看到目录的名称为Web字体，您可以打开此目录，您应该会看到许多目录，例如“roboto_black_macroman .....”等等。它们的名称以“roboto”开头，每个目录表示一种Roboto字体样式。您可以选择其中一个，将其上传到您的网站服务器目录中，如您所愿。

  • 步骤3：完成步骤2后，您应该将以下代码添加到您的CSS样式文件中。请注意，您应该提供正确的字体文件路径。**

    @font-face {
font-family: 'Roboto';
src: url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('fonts/roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;

    }

毕竟，您可以直接在使用的网页中使用字体，就像这样。

好的，如果您无法理解我的意思，您可以在此链接的原始页面上查看：http://www.maketecheasier.com/use-google-roboto-font-everywhere/。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接