Roboto thin字体自测可正常加载，其他访问者无法显示问题求助

DevOps 小满

2026-10-5

问题排查与修复方案

1. 修正Google Fonts导入配置

你当前的Google Fonts引入仅加载了Roboto默认的400字重（Regular版本），没有包含100字重的Thin版本，导致本地未安装对应字体的用户访问时无法加载Thin字重，把原@import代码替换为：

/* 同时引入400和100字重的Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');

2. 修正@font-face的配置错误

你当前的@font-face存在两处错误：

format属性取值错误，ttf格式对应的标准format值为truetype，不是ttf
拆分Roboto和Roboto thin两个字体家族的写法不规范，容易出现兼容问题，建议统一使用同一个字体家族名，通过font-weight区分不同字重
修正后的@font-face代码：

@font-face {
    font-family: 'Roboto';
    src: local('Roboto Regular'), url(fonts/Roboto-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: local('Roboto Thin'), url(fonts/Roboto-Thin.ttf) format('truetype');
    font-weight: 100;
    font-style: normal;
}

3. 简化文本类的CSS配置

统一使用Roboto字体家族，通过font-weight指定Thin字重即可，不需要单独调用Roboto thin字体名：

.txt2 { /* text */
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    color: white;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 5%;
    margin-left: 20%;
    margin-right: 20%;
    font-weight: 100;
}