中文字体的本地字体不适用于文本

Question

我想为浏览器提供本地中文字体，但 chrome 或 firefox 似乎没有加载它们。这里可能出了什么问题？

我试过用各种方式写路径 - absolute/relative 路径，但还是不行。 chrome 的网络选项卡似乎没有反映加载任何本地字体文件。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="font_face_index.css">
</head>
<body>
    <svg width="800" height="400">
        <text font-family='5' font-size="20px" y="50" x="50">咬释征巩个第涉景试为工给期催音足疗牛</text>
    </svg>

    <h2 style="font-family:'KaiTi';">咬释征巩个第涉景试为工给期催音足疗牛</h2> 
</body>
</html>

///////////////////// font_face_index.css /////////////////////

@font-face{font-family:"0";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/A Li Da Slender Bold Elegant Chinese Font -Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"1";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Aquarius Chinese Font-Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"2";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Devil May Cry Art Chinese Font – Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"3";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Energetic Cute Chinese Font – Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"4";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Pisces Bubble Chinese Font-Simplified Chinese Fonts.ttf")format("ttf");}
@font-face{font-family:"5";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Accompany you forever Font-Simplified Chinese.ttf")format("ttf");}

'KaiTi' 本地安装在我的机器上可以正常工作，而 text 默认为任何默认字体。（我已经尝试了这里列出的所有字体）。

Answer 1

对于Windows系统，在文件名中使用escape character，或者用连字符重写。

例如：

@font-face {
    font-family: 'A-Li-Da-Slender';
    src: url(font/A-Li-Da-Slender-Bold-Elegant-Chinese-Font-Simplified-Chinese-Fonts.ttf);
}

或

@font-face {
    font-family: 'A-Li-Da-Slender';
    src: url(font/Aa\ Aquarius\ Chinese\ Font-Simplified\ Chinese\ Fonts.ttf);
}

中文字体的本地字体不适用于文本

Local font-face for Chinese fonts does not apply to the text

html

css

fonts

truetype

font-face