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

如何解决将字体文件添加到 Web 应用程序

我正在开发 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，我是否需要在提交之前将这些文件转换为二进制文件。谢谢

解决方法

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

为了获得最大的向后兼容性，您应该使用您展示的带有多种字体文件格式的第二个示例。

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