新手求助：网页@font-face引入Chilanka自定义字体不生效

你的代码存在多处语法错误、匹配逻辑错误，逐一修正即可兼容所有主流浏览器：

• 首先删除无效代码：<link href="Chilanka-regular.ttf"> 这个标签无法引入字体文件，link标签仅支持关联CSS、站点图标、预加载资源等场景，不能直接加载ttf字体。
• 修正@font-face块的语法错误：
  • 删除无意义的font: Chilanka-regular;声明，该属性不属于@font-face的标准定义规则，会干扰规则解析。
  • 修复src属性语法：原代码在local()参数后错误添加分号，直接截断了后续的外部字体路径声明；同时local()内需要填写字体的系统注册名Chilanka，而非带后缀的文件名；另外format('truetype')后多余的逗号也会导致规则解析失败。
• 修正字体名不匹配问题：原代码@font-face里声明的字体名是Chilanka-regular，实际给元素设置的字体名是Chilanka，名称不一致会导致浏览器完全匹配不到自定义字体规则。
• 注意：将字体放入/usr/share/fonts系统目录仅能让本地桌面应用（比如你提到的kolorpaint）调用字体，网页加载自定义字体走的是web路径规则，不会直接读取系统字体目录下的文件给未安装该字体的访问者使用，这步操作对网页字体加载无效。

CSS部分 #

@font-face {
  font-family: 'Chilanka';
  /* 优先读取用户本地已安装的Chilanka字体，不存在时再加载项目目录下的字体文件 */
  src: local('Chilanka'),
       url('Chilanka-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  /* 保证字体加载过程中文本正常显示，兼容所有现代浏览器 */
  font-display: swap;
}

.chilanka-text {
  font-size: 20px;
  color: green;
  /* 字体名和@font-face声明完全一致，后面加fallback无衬线字体保证兼容性 */
  font-family: 'Chilanka', sans-serif;
  font-weight: normal;
  font-style: normal;
}

HTML结构 #

删除无效的字体link标签后，正常引入样式即可：

<div class="chilanka-text" id="chilanka-text" name="chilanka-text">
blabla
</div>

• 严格核对文件名大小写：Linux环境、web服务器对文件名大小写敏感，如果你本地字体文件名为Chilanka-Regular.ttf（首字母R大写），代码里写小写r的Chilanka-regular.ttf会直接报404导致加载失败，必须保证代码内路径和实际文件名完全一致。
• 不要直接用file://协议双击打开html测试：部分浏览器会对本地文件协议下的资源加载做安全限制，导致字体无法正常加载。可以在项目目录下执行python3 -m http.server启动简易本地服务，访问http://localhost:8000测试。
• 测试时打开浏览器开发者工具的「网络」面板，筛选字体类请求，查看ttf文件的响应状态：状态码200代表文件加载成功，404代表路径错误，403代表文件权限不足。如果加载成功仍未生效，可以在「元素」面板的计算样式里查看实际渲染字体，确认是否命中Chilanka。

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