问题描述:

I have a couple of master css font-face declarations that look something like this:

@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');

}

Here and there, in the rest of the css these font-faces are referenced in the font-family tags.

e.g.

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

The issue that I am trying to solve is that not all characters, such as é,ú,ó, etc., are available in myfont so I need to resort to a standard font for non-English versions. How can I override what "myfont" and "myfontBold" actually use? I want them to use arial, ideally without having to redeclare all classes that use myfont and myfontBold

I have tried including this in the head if in non-English mode

 <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>

but the original myfont is still active. Is there a way around this? I also tried, adding the !important to after the local("Arial").

网友答案:

I don't think you can actually override a font-family this way using only css and HTML, since your browser has no way of knowing which characters myfont doesn't have and overriding them. The only thing I can think of is a JavaScript or jQuery function which loops round whatever elements contain special characters and replace the the elements' font-family declaration with Arial:

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>
相关阅读:
Top