ionic 2 - 字体未在iOS上显示

Question

我正在尝试使用自定义字体Quicksand创建一个应用程序(离子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应用程序中使用这些字体.