将字体文件添加到 Web 应用程序答案

【问题标题】：Adding font files to a Web Application将字体文件添加到 Web 应用程序
【发布时间】：2021-09-15 22:21:17
【问题描述】：

我正在开发 ASP.NET Web 表单应用程序。我正在使用 Visual Studio 2019。我想向应用程序添加两种新字体，并使用以下方式添加，它按预期工作。我已经检查了 Firefox、Google Chrome 和 New Edge 的更改，它工作正常。我只是为每种字体添加了一种文件类型，如下所示。

@font-face {
    font-family: 'TT Commons';
    src:url('./Fonts/TTCommons/TTCommons2.woff2') format('woff2');
}

@font-face {
    font-family: 'Hind';
    src: url('./Fonts/Hind/Hind-Regular.ttf') format('truetype');
}

但我在网上看到很多例子如下（其中包含一种字体的多种文件类型）

@font-face {
    font-family: 'font-name';
    src: url('font-name.eot');
    src: url('font-name?#iefix') format('embedded-opentype'),
         url('font-name.woff') format('woff'),
         url('font-name.ttf') format('truetype'),
         url('font-name.svg#font-name') format('svg');
    font-weight: normal;
    font-style: normal;
}

我想知道添加一种类型就足够了，或者我需要添加每种类型并且我正在使用 Git，我是否需要在提交之前将这些文件转换为二进制文件。谢谢

【问题讨论】：

标签： css asp.net fonts webforms webfonts

【解决方案1】：

不同版本的浏览器支持不同的字体文件格式，最新的是woff2。

为了最大程度地向后兼容，您应该使用您展示的第二个示例，其中包含许多字体文件格式。

您可以查看https://caniuse.com/woff2 以查看各种浏览器支持。如果显示的支持级别可以接受，您可以只使用woff2。

【讨论】：