css - 用arial(或其他标准字体)覆盖CSS字体声明

我有几个主要的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。

最佳答案

我认为您实际上不能仅使用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>