Vue.js 应用程序中的 CSS : Safari & Firefox are not loading Google Font

Question

我正在使用 Vue 制作作品集。我希望全局字体样式为 Montserrat，但 Chrome 是唯一反射(reflect) CSS 的浏览器。 Safari 和 Firefox 都在检查器中抛出错误，指出它们无法访问 Google 字体 url。

我试过在 HTML 中使用 @import 语法、字体语法和 href 链接。我还尝试下载字体并将它们托管在我的 Vue 应用程序中，但我似乎无法让它工作——我对 Vue 还是个新手。

目前:

<link href="https://fonts.googleapis.com/css? family=Montserrat:400&display=swap" rel="stylesheet">

这可以让 Chrome 显示正确的字体。如果我提取 URL 并将其粘贴到 Firefox 或 Safari 中，两者都将无法加载该页面。打开检查器时，两者都显示无法从 fonts.google 加载资源。

在 App.vue 样式部分:

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-family:'Montserrat', Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
}

我还尝试将 HTML 替换为:

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/Montserrat-Regular.woff2') format('woff2'),
   url('/assets/fonts/Montserrat-Regular.woff') format('woff'),
   url('/assets/fonts/Montserrat-Regular.ttf')  format('truetype');
}

我也试过基本的:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400&display=swap');

没有任何效果。可以直接粘贴

https://fonts.googleapis.com/css?family=Montserrat:400&display=swap 

在 Chrome 中，您可以看到字体选择器，但在 Firefox 和 Safari 中，您甚至无法加载页面。

我希望在 Safari、Firefox 和 Chrome 中使用 Montserrat 字体，但我只看到它在 Chrome 中呈现。

Answer 1

已解决:主机文件中的冲突会阻止 Google 字体在非 Chrome 浏览器中加载，或者在作为本地主机时将字体中继到其他设备。