Question

我有几个主css font-face声明，看起来像这样：

@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-faces在font-family标签中被引用。

e.g。

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仍然有效。有没有解决的办法？我也尝试过，将！important添加到本地（“Arial”）之后。

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>

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

1 个答案: