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应用程序中使用这些字体。

ionic 2 - 字体未在iOS上显示

1 个答案: