用 arial（或其他标准字体）覆盖 CSS font-face 声明

Question

我有几个类似这样的主 css 字体声明：

@font-face {
font-weight: normal; font-style: normal;
font-family: 'myfont'; src: url('../fonts/myfont-Reg-webfont.eot'); src: url('../fonts/myfont-Reg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/myfont-Reg-webfont.woff') format('woff'), url('../fonts/myfont-Reg-webfont.ttf') format('truetype'), url('../fonts/myfont-Reg-webfont.svg#myfontRegular') format('svg');
}

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

到处都是，在 css 的其余部分中，这些字体在 font-family 标记中被引用。

例如

h3{ font-family: 'myfontBold',Arial, sans-serif; 

我要解决的问题是，并非所有字符（例如 é、ú、ó 等）都可以在 myfont 中使用，因此我需要为非英文版本使用标准字体。如何覆盖“myfont”和“myfontBold”实际使用的内容？我希望他们使用 arial，理想情况下不必重新声明所有使用 myfont 和 myfontBold 的类

如果在非英语模式下，我已尝试将其包含在头部

    <style>
        @font-face {
            font-weight: normal; font-style: normal;
            font-family: 'myfont'; src: local("Arial"); src:(sans-serif);
        }

        @font-face {
            font-weight: bold; font-style: normal;
            font-family: 'myfontBold';src: local("Arial"); src:(sans-serif);
        }
</style>

但原来的 myfont 仍然有效。有没有解决的办法？我也试过，在 local("Arial") 之后添加 !important。

Answer 1

我认为您实际上不能仅使用 css 和 HTML 以这种方式覆盖字体系列，因为您的浏览器无法知道 myfont 没有哪些字符并覆盖它们。我唯一能想到的是一个 JavaScript 或 jQuery 函数，它循环任何包含特殊字符的元素，并用 Arial 替换元素的 font-family 声明：

function replaceSpecial(s) {
	var a = ["é", "è", "â", "ô"];
	$.each(a, function(index, value) {
		if (s.text().indexOf(value) > -1) {
			s.css("font-family", "arial");
		};
	});
}
$("span").each(function() {
	replaceSpecial($(this));
});

span {
  display:block;
  width:100%;
  margin:20px;
	font-family: algerian;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Remplacez précisément tout ce qui n'est pas français</span>
<span>Le côté ... mon âge</span>

<span>This element's font should never be replaced</span>