2019年是否有跨浏览器的方式将字体包含在Web应用程序中? [英] Is there a cross browser way to include fonts in web applications in 2019?

问题描述

在将某些工作站升级到Windows 10和IE11的组合之后，我拥有5年历史的Java Web应用程序遇到了字体问题.从Microsoft的角度详细描述了此问题，

My five year old java web application has run into problems with fonts, after some work stations has been upgraded to the combination of windows 10 and IE11. The issue is described in detail from Microsofts perspective here. There are several resources describing how to turn off these settings, but I'd like to know if there are any cross browser solutions to keep using specific fonts, with web fonts blocked.

Microsoft的建议是以下两个:

在安装了应用程序的每台计算机上，右键单击字体名称 然后单击安装".字体应自动安装到您的 %windir%/Fonts目录.如果不是，则需要手动复制 将字体文件放到Fonts目录中，并从以下位置运行安装 在那里.

On each computer with the app installed, right-click on the font name and click Install. The font should automatically install into your %windir%/Fonts directory. If it doesn’t, you’ll need to manually copy the font files into the Fonts directory and run the installation from there.

这是指桌面应用程序，不能通过Web应用程序完成.无论如何，这都不是令人满意的解决方案，因为它需要每个用户积极地进行设置.

This refers to a desktop application, and cannot be done with a web application. It would not have been a satisfactory solution anyway, as it requires active setup action from every user.

在安装了该应用程序的每台计算机上，打开regedit.exe ...

On each computer with the app installed, open regedit.exe...

我什至不打算包括其余部分，因为它与上一个解决方案建议存在相同的问题.

I'm not even going to include the rest, as it has the same problems as the last solution suggestion.

我尝试过的事情:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-
    awesome.css' rel='stylesheet' type='text/css'>

不起作用.参考中的css文件尝试使用以下行加载字体:

Doesn't work. The css file in reference tries to load the font with the following lines:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

它以不同的格式导入相同的字体，以支持不同的浏览器. 我希望我可以继续使用很棒的字体，只需下载资源并将它们打包到我的.war文件中即可.但是我使用这种方法的另一种字体也不起作用:

it imports the same font in different formats, to support different browsers. I had hoped that I could continue to use font awesome, simply by downloading the resources, and packing them inside my .war-file. But another font I use this approach for, does not work either:

来自我的custom-fonts.css:

from my custom-fonts.css:

@font-face {
    font-family: 'Trim';
    src: url('../../resources/fonts/TrimCompleteOT/Trim-Bold.woff') format('woff'),
         url('../../resources/fonts/TrimCompleteOT/Trim-Bold.otf') format('opentype');
    font-weight: 700;
}

但是即使我的应用程序中包含打包的字体，也不会加载或显示.

But even packaged fonts inside my application, will not load or display.

是否有任何方法可以在Java Web应用程序中使用自定义字体，而不包括关闭安全性设置或不必将设置(如安装字体)应用于每台用户计算机?

Is there any way to use custom fonts in a java web application, that does not include turning off security settings, or having to apply settings (like install the fonts) to each individual users computer?

侧面说明:在任何Windows版本上，一切仍然可以在chrome中使用，在非Windows10计算机上，也可以在IE11中使用.

Side note: everything still works in chrome on any windows version, and also in IE11 on non-windows10 computers.

推荐答案

如果在安全设置中禁用了webfonts的使用，则没有实际的解决方法.如果可能的话，您可能故意绕过Windows安全设置，这可能是一个讨厌的黑客.

If usage of webfonts is disabled in the security settings, there's no real way around them. If there would be, it'd probably be a nasty hack as you'd deliberately circumvent Windows security settings.

然后是计划B的时间.我就此特定问题撰写了文章，总之，您必须使用外观漂亮的系统字体作为文本的后备，并使用基于图像的系统作为图标.例如.使用PNG或SVG图片.但是，如果您要沿用这条路线，则最好将 all 浏览器的图标字体替换为适当的图标.

Time for Plan B, then. I wrote about this specific issue, and in short you'd have to use nice looking system fonts as fallbacks for text, and an image-based system for icons. E.g. use PNG or SVG images. But if you're going that route you might as well replace the icon font with proper icons for all browsers.

祝你好运，顺便问一句写得很好的问题.

Good luck, and kudos for the nicely written question by the way.

这篇关于2019年是否有跨浏览器的方式将字体包含在Web应用程序中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！