我使用CSS属性font-family,将值设置为Roboto和"Roboto Lt"。当我使用Android手机浏览页面时,font-family有效,但在iPhone 5s通过Safari浏览器浏览页面时无效。
有人遇到过这个问题吗?
Roboto是Android中包含的字体,但不是iOS中包含的字体。您需要在Google Fonts中包含此字体。
我希望这个答案可以帮助其他遇到类似问题的人,就像我遇到的一样。 以下是我的解决方案,您可以按照以下步骤操作。
步骤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/。