Razor Pages中CSS自定义字体设置失败问题排查

问题1：双@符号语法错误 #

CSS中定义自定义字体的规则是@font-face，你写的@@font-face属于语法错误，必须去掉一个@符号。

问题2：路径与转义字符问题 #

• 纯CSS不识别~/路径标识，需要根据CSS文件的实际位置编写相对路径：
  • 若CSS文件在wwwroot/css目录，路径应写为../fonts/BebaseNeue-Regular.ttf
  • 若CSS文件直接在wwwroot目录下，路径写为fonts/BebaseNeue-Regular.ttf即可
• 代码里的"是HTML转义字符，纯CSS中直接使用双引号"即可，无需转义

修复后的代码示例 #

@font-face {
    font-family: bebas_neue;
    src: url('../fonts/BebaseNeue-Regular.ttf') format("truetype");
}

.majorHeadline{
    font-size: 50px;
    font-family: bebas_neue;
}

内容的提问来源于stack exchange，提问作者inno