Question

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

但是可惜它没有用。

Answer 1

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

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

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

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

https://jsfiddle.net/a73ekh6z/

Answer 2

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

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

js：

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

jquery：

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

覆盖字体定义

2 个答案: