ionic 2 - 字体未在 iOS 上显示

Question

我正在尝试使用自定义字体 Quicksand 创建一个应用程序（ionic 2）。

我的文件夹结构如下：

src
|
|-app
|   |
|   -app
|   |   |
|   |   -app.scss
|   |
|   -pages
|   |
|   -assets
|   |     |
|   |     -img
|   |     |
|   |     -fonts
|   |     |    |
|   |     |    -Quicksand-Bold.ttf

在我的app.scss 中，我有以下代码可以使字体在我的所有页面中都可用：

@font-face {
    font-family: 'Quicksand-Bold';
    font-style: normal;
    font-weight: 300;
    src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Quicksand-Bold';
    font-style: normal;
    font-weight: 300;
    src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

然后我可以在任何地方使用font-family: Quicksand-Bold 引用它。

这在 Android 和浏览器上运行良好，但无法在 iOS 上加载。

我在使用时遇到了问题：

background: url('../assets/img/background.jpg')

这导致我的 ios 应用程序崩溃。我为此使用的解决方法是使用图像创建一个div，并将其定位为背景图像。

当我引用 url("../assets/fonts/Quicksand-Bold.ttf") 时，我感觉这里发生了同样的事情，由于某种原因 iOS 无法找到指定的路径。

Answer 1

好的，viCky 的评论没有回答我的问题，但确实让我走上了正确的道路。

在我的问题中，您可以看到我引用了一个.ttf 文件并尝试将其格式化为woff2。但由于 iOS 仅支持 otf 和 ttf 字体，因此使用 .woff2 格式会破坏字体。 .ttf 文件的正确格式是 TrueType。

所以改成：

src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('truetype');

代替

src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('woff2');

解决了我的问题。现在我可以在我的 iOS 应用中使用这些字体了。