Question

我只需要将一行更改为Uthmanic字体。我已经尝试过下面的代码。但到目前为止，uthmani字体还没有加载。

我已将Uthmani字体添加到文件夹：assets-＆gt; articles-＆gt; UthmanicHafs.ttf

done.html：

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>

 <p > Url to load contents </p>

 <p class="uth">Change this text </p>    --->change to uthmani font for this one line

 </body>

的style.css：

body {
    margin: 15px;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans'), local('OpenSans'), url(opensans.woff2) format('woff2');
}

@font-face {
  font-family: 'Uthmani';
  font-weight: 500;
  src: local('Uthmani'), local('Uthmani'), url(UthmanicHafs.ttf) format('ttf');
}


.uth {
   font-family: 'Uthmani'
   font-size: 100px;
   font-weight: bold;
}

我不知道为什么uthmani字体没有被加载。任何人都可以帮助我。谢谢。

Answer 1

您必须定义字体的路径。将所需的OTF或TTF字体放在assets/fonts中，并在css文件中定义如下路径：

@font-face {
    font-family: MyFont;
    src: url("file:///android_asset/fonts/MyFont.otf")
}

如果您的字体不是拉丁字体，请尝试将字体从otf转换为svg！关于这个问题有一些讨论和错误报告，但谷歌从未回复 - 如果我错了请纠正我。

使用像Everything Fonts这样的在线转换器，你会很好。确保命名空间包含xmlns="http://www.w3.org/2000/svg"！

Answer 2

对于Android和其他移动设备，您需要.svg类型的字体。请在媒体查询中使用它。

使用android中的html从css文件加载字体

2 个答案: