覆盖字体定义

Question

假设在一个我无法访问的文件中有一个 font-face 定义，是否可以从全局 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;
}

但不幸的是，它没有工作。

- Rafa Romero

Answer 1

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

如果这是模板的主要字体系列，您可以将其更改为body:

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

或者您可以选择具有此特定字体族的元素。

https://jsfiddle.net/a73ekh6z/

- Yahya Essam

Answer 2

使用 '@' 符号定义的 CSS 规则无法用于级联或覆盖样式。

在您的情况下，最好的覆盖 font-family 的方法是使用 js/jquery。

js：

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

jQuery：

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

- Vishnu Baliga