.NET Core Blazor Server移动端自定义字体偶尔不加载问题求助

问题描述 #

使用.NET Core Blazor Server结合Bootstrap开发网站，引入Campton、Writer系列自定义字体后，在移动端默认浏览器中偶尔出现字体完全不显示的情况，且未切换到配置的Tahoma、Verdana等备用字体。问题非必现，最可靠的复现方式为使用移动端默认浏览器打开网站。

当前字体加载SCSS代码 #

//Doya Fonts///////////////////////////////////////////////////////////////////////////////////////////////
$font-display: swap;

//Campton
@font-face {
    font-family: 'Campton Bold';
    font-weight: 700;
    src: local('Campton Bold'), url('../fonts/campton/CamptonBold.woff') format('woff');
    font-display: $font-display; /* Read next point */
    unicode-range: U+000-5FF; /* Download only latin glyphs */
}

@font-face {
    font-family: 'Campton Medium';
    font-style: normal;
    font-weight: 400;
    src: local('Campton Medium'), url('../fonts/campton/CamptonMedium.woff') format('woff');
    font-display: $font-display; /* Read next point */
    unicode-range: U+000-5FF; /* Download only latin glyphs */
}

@font-face {
    font-family: 'Campton ExtraBold';
    font-style: normal;
    font-weight: 900;
    src: local('Campton ExtraBold'), url('../fonts/campton/CamptonExtraBold.woff') format('woff');
    font-display: $font-display; /* Read next point */
    unicode-range: U+000-5FF; /* Download only latin glyphs */
}

//Writer
@font-face {
    font-family: 'Writer Bold';
    font-style: normal;
    font-weight: 700;
    src: local('Writer Bold'), url('../fonts/writer/Writer-Bold.woff') format('woff');
    font-display: $font-display; /* Read next point */
    unicode-range: U+000-5FF; /* Download only latin glyphs */
}

@font-face {
    font-family: 'Writer Regular';
    font-style: normal;
    font-weight: 400;
    src: local('Writer Regular'), url('../fonts/writer/Writer-Regular.woff') format('woff');
    font-display: $font-display; /* Read next point */
    unicode-range: U+000-5FF; /* Download only latin glyphs */
}

$font-family-primary: "Campton Bold", Tahoma, Verdana;
$font-family-primary-light: "Campton Medium", Tahoma, Verdana;
$font-family-primary-bold: "Campton ExtraBold", Tahoma, Verdana;

$font-family-secondary: "Writer Regular", Courier New, Consolas;
$font-family-secondary-bold: "Writer Bold", Courier New, Consolas;

排查与解决方案 #

1. 补充字体格式，提升兼容性 #

部分移动端旧版默认浏览器对单一WOFF格式支持不佳，建议补充WOFF2格式字体文件（压缩率更高、加载更快），同时保留WOFF作为降级选项：

src: local('Campton Bold'), 
     url('../fonts/campton/CamptonBold.woff2') format('woff2'),
     url('../fonts/campton/CamptonBold.woff') format('woff');

2. 检查unicode-range范围限制 #

当前配置的unicode-range: U+000-5FF可能未覆盖页面实际使用的字符，导致浏览器无法匹配字体。建议先注释该配置，测试是否还会出现字体不显示问题，确认后再调整范围到实际需要的字符集。

3. 优化Blazor静态资源加载时机 #

Blazor Server的渲染模式可能导致字体资源延迟加载，移动端网络波动时易超时：

• 在_Host.cshtml的<head>中提前引入字体CSS文件，确保组件渲染前启动字体加载
• 配置静态资源缓存，减少重复加载失败概率（在Program.cs中添加）：

app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        ctx.Context.Response.Headers.Append("Cache-Control", "public, max-age=31536000");
    }
});

4. 简化字体族命名与fallback逻辑 #

当前不同字重使用独立字体族名称，可能导致浏览器fallback逻辑异常。建议统一字体族命名，通过font-weight区分字重：

// 重构Campton字体定义
@font-face {
    font-family: 'Campton';
    font-weight: 400;
    src: local('Campton Medium'), url('../fonts/campton/CamptonMedium.woff2') format('woff2'), url('../fonts/campton/CamptonMedium.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Campton';
    font-weight: 700;
    src: local('Campton Bold'), url('../fonts/campton/CamptonBold.woff2') format('woff2'), url('../fonts/campton/CamptonBold.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Campton';
    font-weight: 900;
    src: local('Campton ExtraBold'), url('../fonts/campton/CamptonExtraBold.woff2') format('woff2'), url('../fonts/campton/CamptonExtraBold.woff') format('woff');
    font-display: swap;
}

// 修改字体变量
$font-family-primary: Campton, Tahoma, Verdana;

5. 排查移动端浏览器加载策略 #

部分移动端默认浏览器会在省流模式下限制非系统字体加载，可通过浏览器开发者工具Network面板：

• 确认字体文件返回状态码为200（排除404、500等错误）
• 检查是否存在CORS问题（若字体存于CDN），确保服务器配置正确的CORS响应头

内容的提问来源于stack exchange，提问作者Matías Pablo Bordoy