代码之家  ›  专栏  ›  技术社区  ›  jumps4fun

2019年是否有跨浏览器的方式在web应用程序中包含字体?

  •  1
  • jumps4fun  · 技术社区  · 5 年前

    here . 有几个资源描述了如何关闭这些设置,但我想知道是否有跨浏览器解决方案可以在阻止web字体的情况下继续使用特定字体。

    微软的建议有以下两种:

    然后单击安装。字体应自动安装到您的计算机中 %windir%/Fonts 目录如果没有,您需要手动复制 那里

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

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

    我所尝试的:

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

    不起作用。引用中的css文件尝试加载具有以下行的字体:

    @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;
    }
    

    它以不同的格式导入相同的字体,以支持不同的浏览器。

    从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;
    }
    

    旁注:在任何windows版本的chrome中,以及在非windows10计算机上的IE11中,一切都可以正常工作。

    1 回复  |  直到 5 年前
        1
  •  2
  •   RoelN    5 年前

    如果在安全设置中禁用webfonts,那么就没有真正的解决方法。如果有,这可能是一个令人讨厌的黑客行为,因为你故意绕过Windows安全设置。

    B计划的时间到了。我 wrote about this specific issue 浏览器。