Можно ли отобразить альтернативный символ с помощью CSS?

Question

Я использую веб-шрифт с несколькими разными буквами "M" на панели глифов. Значение по умолчанию "M", которое продолжает отображаться на моем сайте, отвратительно. Я хотел бы использовать более привлекательную букву "М" из одного из альтернативных вариантов шрифта.

На панели глифов (в Illustrator) я хочу использовать символ "M": U+004d Alternates#2 (aalt2)

У меня есть это в настоящее время в моем CSS:

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

К сожалению, этот код не тянет альтернативу "М", которую я хочу. Он просто тянет "М" по умолчанию, от которого я пытаюсь избавиться.

Возможно ли вообще вызвать альтернативный "М" из шрифта и отобразить его на веб-странице?

Answer 1

Хорошо, HTML-код, который соответствует символу шрифта Unicode 004D, " M Msgstr "Так как вы хотите изменить все вхождения указанного" M "на этот конкретный символ, просто найдите вхождения этого символа и добавьте тег span на лету.

Вот пример, где я сделал то же самое с символом "е", но не "E". Я изменил "е" с "ȝ"

JSFIDDLE ССЫЛКА здесь.

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

Другой вариант - использовать атрибут "unicode-range" в @ font-face, чтобы указать новый шрифт и применять этот новый шрифт к каждому вхождению символа. См. Документацию MDN здесь.

Скрипку для этого можно найти здесь::: http://jsfiddle.net/dka30drt/7/

Фрагмент кода здесь для 2-го варианта,

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

Надеюсь это поможет

Answer 2

Да, вы можете сделать это следующим образом:

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

Answer 3

Я вроде понял это. Это работает в FF, но не в Safari.

Это HTML-код слова "М" в слове "Встреча", который я хочу изменить:

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

Это CSS, который изменил это письмо для меня:

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

Совет для профессионалов: если вы генерируете веб-шрифт, убедитесь, что альтернативы действительно есть в этом веб-шрифте. У меня была версия шрифта, в которой не было альтернативы, поэтому чертов код не работал!