Electron加载Google样式表时的Proxy/SSL检查问题

我之前也碰到过类似的Electron加载Google字体CDN的坑，结合你的情况来看，问题核心应该是Electron默认的请求环境和普通浏览器不一致，导致Google字体CDN拦截了页面内的资源请求（出现403或加载错误），而直接用mainWindow.loadURL时，Electron的请求上下文不同，所以能正常加载。下面给你几个可行的解决方案：

1. 修改Electron请求头，绕过CDN UA拦截 #

Google字体CDN经常会拒绝Electron默认的User-Agent，你可以在主进程里配置session，模拟普通浏览器的UA来绕过拦截：

在你的Electron主进程文件（比如main.js）中添加这段代码：

const { session } = require('electron')

// 在创建窗口前配置请求头
session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
  // 替换成主流浏览器的UA
  details.requestHeaders['User-Agent'] = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
  callback({ cancel: false, requestHeaders: details.requestHeaders })
})

// 然后正常创建窗口
const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false, // 根据你的项目需求调整
    contextIsolation: true
  }
})

配置完成后，保留index.html里的https协议link标签，应该就能正常加载字体了。

2. 本地托管字体文件（生产环境最稳妥方案） #

依赖外部CDN总会有网络或权限风险，最稳定的方式是把字体下载到本地：

• 去Google Fonts下载Source Sans Pro的字体文件和配套CSS
• 把字体文件放到项目的public/fonts目录，CSS文件放到public/css目录
• 在index.html中引用本地CSS：

  <link rel="stylesheet" href="./css/source-sans-pro.css"/>
  

这种方式完全脱离外部依赖，既不会有请求拦截问题，还能提升应用的加载速度。

3. 通过Vuetify配置指定字体 #

Vuetify本身支持自定义字体配置，你可以结合上面的两种方式来设置：

1. 先确保字体已成功引入（本地或修改UA后的CDN）
2. 在Vuetify配置文件（比如src/plugins/vuetify.js）中设置：

   import { createVuetify } from 'vuetify'
   
   export default createVuetify({
     theme: {
       fontFamily: {
         sans: 'Source Sans Pro, sans-serif',
       },
     },
   })
   

这样Vuetify会自动使用你指定的字体，避免手动设置样式的冲突问题。

内容的提问来源于stack exchange，提问作者Jeef