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

Question

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

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

Answer 1

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

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

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

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

Adding font files to a Web Application

css

asp.net

fonts

webforms

webfonts