覆盖字体定义答案

【问题标题】：Override font-face definition覆盖字体定义
【发布时间】：2018-10-24 07:38:33
【问题描述】：

假设在我无权访问的文件中有字体定义，是否可以从全局 CSS 文件中覆盖？

例如，在一个文件（不可访问文件）中有如下定义：

@font-face {
    font-family: 'openSans-Bold';
    src: url('OpenSans-Bold-webfont.eot');
    src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Bold-webfont.woff') format('woff'),
         url('OpenSans-Bold-webfont.ttf') format('truetype'),
         url('OpenSans-Bold-webfont.svg#openSans-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

我尝试在另一个全局文件中覆盖如下（使用相同的名称）：

@font-face {
  font-family: 'openSans-Bold' !important;
  src: local('Arial') !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

但遗憾的是它不起作用。

【问题讨论】：

标签： css font-face font-family

【解决方案1】：

您不能覆盖字体本身。我建议您可以使用 JavaScript 更改字体系列。

如果这是您模板的主要字体系列，您可以为正文更改它：

document.body.style.fontFamily = 'Arial';

或者您选择具有此特定字体系列的元素。

https://jsfiddle.net/a73ekh6z/

【讨论】：

【解决方案2】：

使用“@”符号定义的 Css 规则不能用于级联或覆盖样式。

在您的情况下，覆盖字体系列的最佳方法是使用 js/jquery。

js:

document.body.style.fontFamily = 'Arial';

jquery：

$('body').css("font-family", $(this).val());

【讨论】：