css - 如何为 @font-face 正确解析 Devanagari/Hindi

Question

从这个字符串开始:

वृत्तयः पञ्चतय्यः क्लिष्टाक्लिष्टा

我正在尝试在我的移动设备上呈现它(通过 Cordova/PhoneGap)。

在我的浏览器 ( localhost:8000 ) 上，它显示正常。正如示例中显示的那样。但在我的设备上，它看起来像这样:

它肯定采用了我的字体 (Karma-Light)，因为我注意到别名比默认的 Helvetica、sans-serif 等更好。

我的 CSS 看起来像这样:

@font-face {
    font-family: 'Karma';
    src: local('Karma'), url('../fonts/Karma-Light.ttf') format('truetype');
    unicode-range: U+0900–097F;
    font-weight: normal;
    font-style: normal;
}

.devanagari { font-family: 'Karma', Helvetica, Arial, sans-serif; }

我尝试了各种不同的 unicode-ranges，也尝试了省略 unicode-range，但一切都以相同的方式显示。

有什么想法吗？

Answer 1

以防有人卡在这里!

打开 /src/ 中的 index.html

并确保它说的是这个!

<meta charset="utf-8" name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

声明字符集使其工作。