我正在用 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中呈现。
已解决：主机文件中的冲突导致 Google 字体无法在非 Chrome 浏览器中加载，或者在充当本地主机时无法将字体中继到其他设备。