Is it possible to display an alternate character with CSS?

问题

I am using a web font that has several different, "M's" to choose from, in the glyphs panel. The default "M" that keeps being displayed in my website is hideous. I would like to use a better looking "M" from one of the font's alternate character choices.

In the glyphs panel (within Illustrator) the "M" character I want to use is: U+004d Alternates#2 (aalt2)

I have this currently in my CSS:

.script:before {
content: "\004D";
}

Unfortunately, this code does not pull the alternate "M" I want. It just pulls the default "M" that I'm trying to get rid of.

Is this even possible to call an alternate "M" from a font, and display it on a web page?

回答1:

Ok the html code that corresponds to the font unicode character of 004D is "M" . Since you want to change all the occurences of the specifiv "M" to that particular character, just find the occurences of that character and add a span tag on the fly.

Here is an example where I have done the same thing with the character "e" but not "E". I changed "e" with "ȝ"

JSFIDDLE LINK here.

$(document).ready(function() {
  $.fn.texter = function() {
    var letters = $(this).html().split(""),
      text = "";

    for (var i in letters) {
      if (letters[i] == "e") {
        text += "<span class='" + letters[i] + "'>" + '&#541;' + "</span>";
      } else {
        text += letters[i];
      }
    }
    $(this).html(text);
  };

  $("body").texter();
});

.e {
  color: magenta;
  font-family: 'Arial';
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="text">Test Message is Entered Here EEE is not touched but eee is changed</div>

Another variation is to use the "unicode-range" attribute in @font-face to specify a new font and apply that new font to every occurence of the character. Refer MDN Documentation here.

The Fiddle for this can be found here ::: http://jsfiddle.net/dka30drt/7/

Code snippet here for the 2nd variation,

$(document).ready(function() {
  $.fn.texter = function() {
    var letters = $(this).html().split(""),
      text = "";

    for (var i in letters) {
      if (letters[i] == "e") {
        text += "<span class='" + letters[i] + "'>" + '&#541;' + "</span>";
        console.log(letters[i]);
      } else {
        text += letters[i];
        /*console.log(letters[i]);*/
      }
    }
    $(this).html(text);
  };

  $("body").texter();
});

@font-face {
  font-family: funkyfont;
  src: url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.eot?#iefix) format('embedded-opentype'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.woff) format('woff'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.ttf) format('truetype'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.svg#svgFontName) format('svg');
  unicode-range: U+004D;
}
.e {
  color: magenta;
  font-family: 'funkyfont';
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">Test Message is Entered Here EEE is not touched but eee is changed</div>

Hope this helps

回答2:

I sort of figured it out. This works in FF, but not Safari.

This is the HTML for the "M" in the word 'Meet', that I want to change:

<span class="m-alternate">M</span>eet

This is the CSS that changed that particular letter for me:

.m-alternate {
font-feature-settings: "ss02";
}

Pro Tip: If you are generating a web font, make sure the alternates are actually in that web font. I had a version of the font that did not have the alternates, hence why the darn code wasn't working!

回答3:

Yes, you can do it this way:

@font-face {
    font-family: 'MyFont';
    src: local('MyFont');
}

@font-face {
    font-family: 'MyFont-Alt';
    font-feature-settings: "salt"; 
    /* Above can vary depending on the font. For example:
        font-feature-settings: "aalt"; 
        font-feature-settings: "ss01";
    */
    src: local('MyFont');
    unicode-range: U+004d,U+004f ; /* Just in case you want more glyphs. */
}

body{
    font-family: 'MyFont-Alt','MyFont';
}

来源：https://stackoverflow.com/questions/28887373/is-it-possible-to-display-an-alternate-character-with-css