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

Question

我为我的字体 Rajdhani 使用了 CSS 规则 @font-face。在桌面上完美运行，但在 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

您还应该添加其他格式的文件，例如，转到 online web font generator 并转换您的字体然后添加所有类型，因为这与操作系统有关

@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");
}

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

Custom font not working on mobile devices

css

font-face