Opera浏览器无法识别站点中Ubuntu字体的问题求助

针对你遇到的问题，下面是几个关键的修复步骤和代码调整：

1. 修正字体样式表的加载路径 #

你的wp_enqueue_style代码里多了一个斜杠，导致路径解析错误，Opera对路径容错性更低，需要调整：

原错误代码：

wp_enqueue_style( 'ubuntu-fonts-css', get_stylesheet_directory_uri() . '//fonts/ubuntu-stylesheet.css', array(), CHILD_THEME_VERSION );

修正后：

wp_enqueue_style( 'ubuntu-fonts-css', get_stylesheet_directory_uri() . '/fonts/ubuntu-stylesheet.css', array(), CHILD_THEME_VERSION );

2. 修复@font-face的语法错误 #

你在@font-face里把fallback字体sans-serif写到了font-family的引号内，这是错误写法——@font-face的font-family只需要定义自定义字体名称，fallback字体应该在实际使用字体的地方设置：

原错误代码：

@font-face { font-family: 'Ubuntu', sans-serif; src: url('fonts/ubuntu-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

修正后（同时补充woff2格式提升兼容性）：

@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-regular-webfont.woff2') format('woff2'),
         url('ubuntu-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 全局应用字体并添加fallback */
body, button, input, select, textarea {
    font-family: 'Ubuntu', sans-serif;
}

3. 修正字体文件的相对路径 #

如果你的ubuntu-stylesheet.css和字体文件都放在子主题的fonts目录下，url('fonts/...')会解析成fonts/fonts/ubuntu-regular-webfont.woff，导致404错误。直接使用文件名即可指向同目录下的字体文件。

4. 配置服务器MIME类型 #

部分服务器默认未配置woff/woff2字体的MIME类型，Opera可能因此无法识别字体文件：

• Apache服务器：在子主题根目录或站点根目录的.htaccess文件中添加：

AddType font/woff2 .woff2
AddType application/font-woff .woff

• Nginx服务器：在站点配置文件的types块中添加：

types {
    font/woff2 woff2;
    application/font-woff woff;
}

5. 清除浏览器缓存 #

Opera的缓存可能保留了旧的错误资源，按Ctrl+Shift+Del清除缓存后重新加载页面测试。

验证步骤 #

使用Opera开发者工具（F12）切换到网络标签，筛选Font类型，确认字体文件返回200 OK状态码，如果是404，检查路径是否正确。

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