移动网络浏览器上的 Thaana 字体 [重复]答案

【问题标题】：Thaana font on mobile web browsers [duplicate]移动网络浏览器上的 Thaana 字体 [重复]
【发布时间】：2014-03-15 22:35:02
【问题描述】：

我正在使用一种名为 Dhivehi（马尔代夫）的小语言的字体。字母表被称为“Thaana”。有许多可用的 Unicode 字体（例如 Microsoft 的 MV Boli）。它是从右到左书写的。虽然它在笔记本电脑的网络浏览器上完美显示，但在基于手机的浏览器上却不能正确显示。

我正在使用以下 CSS 代码来应用字体：

@font-face {
font-family: 'Eamaan';
src: url('http://www.sun.mv/css/MvEamaanXP.ttf') format('truetype');
}

.thaana{direction:rtl; float:right; unicode-bidi: bidi-override;font-size:16pt;
                float: left;font-family:"Eamaan"; padding:2%;}

对于我的 HTML，我使用以下内容：

<p class="thaana">މިއީ ހަމަ ރަގަޅު ކަމެކެވެ</p>

这会在网络浏览器上产生清晰的文字，但是（对我而言）它在任何基于手机的浏览器上都不起作用。

任何帮助将不胜感激。

【问题讨论】：

移动浏览器通常无法实现桌面浏览器的所有功能。但是您可以使用字符图像来渲染文本。
您正在测试哪些移动浏览器？适用于 Android/iOS 的 Chrome？ iOS Safari？歌剧？如果您在 Android 上的股票浏览器上进行测试，您可能会遇到问题。这些是 OEM 实现的 WebKit 的分支变体。另外，检查支持的功能：caniuse.com/#search=Font
仅使用一种字体格式是不够的。关于这个主题有几个老问题（答案可能有点过时）。
@MattSmith，我一直在 Chrome 和股票浏览器上试用它。

标签： android css iphone fonts bidi

【解决方案1】：

我想知道问题是否在于使用了 true-type 字体。 Chrome (Blink) 和 WebKit 浏览器 (Android stock) 应该支持 true-type，但是当我在桌面上的 Chrome 中运行此代码时，我没有看到 Eamaan 被渲染。

This site 使用 Waheed，他们使用的是在 Chrome 中呈现良好的开放式字体版本。如果你的font-face 规则的 URL 中提供了 Eamaan 的开放式字体，我建议添加它。

例子：

@font-face {
    font-family: 'Eamaan';
        src: url('http://www.sun.mv/css/MvEamaanXP.ttf') format('truetype'),
            url('http://www.sun.mv/css/MvEamaanXP.otf') format('opentype');
}

您可能希望进一步扩展它以包括 .eot、.woff 和 .svg 以获得对 font-face 的全面支持：

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff') format('woff'), /* Modern Browsers */
        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

【讨论】：