自定义字体不适用于移动设备

Question

我@font-face为我的字体 Rajdhani使用了 CSS 规则。在桌面上完美运行，但不适用于 Android 和 IOS 设备：

@font-face {
    font-family: "Rajdhani";
    src: url("/fonts/rajdhani-light.ttf") format("truetype"),
}

@font-face {
    font-family: "Rajdhani";
    src: url("/fonts/rajdhani-medium.ttf") format("truetype"),
}

@font-face {
    font-family: "Rajdhani";
    src: url("/fonts/rajdhani-regular.ttf") format("truetype"),
}

@font-face {
    font-family: "Rajdhani";
    src: url("/fonts/rajdhani-semibold.ttf") format("truetype"),
}

@font-face {
    font-family: "Rajdhani";
    src: url("/fonts/rajdhani-bold.ttf") format("truetype"),
}

Answer 1

您还应该添加其他格式的文件，例如，转到在线网络字体生成器并转换您的字体，然后添加所有类型，因为这与操作系统有关

@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}