Vue.js 应用程序中的 CSS：Safari 和 Firefox 未加载 Google 字体答案

【问题标题】：CSS in Vue.js app: Safari & Firefox are not loading Google FontVue.js 应用程序中的 CSS：Safari 和 Firefox 未加载 Google 字体
【发布时间】：2019-12-05 08:04:07
【问题描述】：

我正在使用 Vue 制作作品集。我希望全局字体样式为 Montserrat，但 Chrome 是唯一反映 CSS 的浏览器。 Safari 和 Firefox 都在检查器中抛出错误，说他们无法访问 Google Fonts 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 中呈现。

【问题讨论】：

? 后面的空格是真的在您的 URL 中还是只是在问题中？对我来说，如果我只是删除那个空间，它在 Firefox 中可以正常工作。如果这不是问题，您能否在问题中包含完整的错误消息？
@skirtle 这只是我帖子中的输入错误，而不是代码。在 Safari 和 Firefox 检查器中，我收到一条消息，例如“加载资源失败。无法连接到 'fonts.googleapis.com/css?family=Montserrat' 服务器”
听起来更像是网络/代理问题，而不是代码问题。您可以从 Firefox 和 Safari 访问 fonts.google.com/specimen/Montserrat 吗？
@skirtle Firefox 和 Safari 在我的笔记本电脑上运行良好。但我注意到刚才在我 iPhone 上的 Safari 中，您提供的链接不起作用，但在 iOS 版 Chrome 中却可以。

标签： css vue.js firefox fonts safari

【解决方案1】：

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

【讨论】：