Question

所以基本上就像问题我需要能够改变HTML中某些字符和符号的字体而不影响它的外观。目前，HTML使用Gotham字体，该字体不支持某些符号。 Arial适用于所有符号。要更改这些字符的字体，我使用了以下代码：

<div ng-controller='MyController' ng-app='myApp'>
    <li ng-repeat="person in var" ng-include="'categoryTree'"></li>
</div>

<script type="text/ng-template" id="categoryTree">
    {{ person.name }}
    <ul ng-if="person.children">
        <li ng-repeat="person in person.children" ng-include="'categoryTree'">           
        </li>
    </ul>
</script>

虽然此代码可以完成其工作，但将符号字体更改为试用版，它有两个主要问题。第一个是重建文本时Gotham字体消失，第二个是重建期间所有格式化（如

标记）消失。

例如：

        var str = $('.text').text(),
            letters = '';
        for (var i = 0, len = str.length; i < len; i++) {
            if (str[i].match(/[¢€£¥©®™‰µ·•…′″§¶ß‹›«»‘’“”<>≤≥–—¯‾¤¦¨¡¿ˆ˜°−±÷⁄×¹²³¼½¾ƒ∫∑∞√∼≅≈≠≡∈∉∋∏∧∨¬∩∪∂∀∃∅∇∗∝∠´¸ªº†‡ÀÁÂÃÅÆÇÈÉÊËĒÌÍÎÏĪÐÑÒÓÔÕÖØŒŠÙÚÛÜŪÝŸȲÞàáâãäåāæçèéêëēìíïīðñòóôõöøōœšùúûüýþÿȳΑΒΓΔΕΖΘΛΞΟΠΡΣΦΨΩαβγδεζηθικλμνξοπρςστυφψωℵϖℜϒ℘ℑ←↑→↓↔↵⇐⇒⇓⇔∴⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈⌉⌊⌋〈〉◊♠♣♥♦]/i)) {
                letters += '<span style="font:20px Arial;">' + str[i] + '</span>';
            }else {
                letters +=str[i];
            }
        }
        $('.text').html(letters);

变成这样：

<p>sadf sdajkf hksadjfh s</p>
<p>Symbols:</p>
<p>¢€£¥©®™‰µ·•…′″§¶ß‹›«»‘’“”&lt;&gt;≤≥–—¯‾¤¦¨¡¿ˆ˜°−±÷⁄×¹²³¼½¾ƒ∫∑∞√∼≅≈≠≡∈∉∋∏∧∨¬∩∪∂∀∃∅∇∗∝∠´¸ªº†‡ÀÁÂÃÅÆÇÈÉÊËĒÌÍÎÏĪÐÑÒÓÔÕÖØŒŠÙÚÛÜŪÝŸȲÞàáâãäåāæçèéêëēìíïīðñòóôõöøōœšùúûüýþÿȳΑΒΓΔΕΖΘΛΞΟΠΡΣΦΨΩαβγδεζηθικλμνξοπρςστυφψωℵϖℜϒ℘ℑ←↑→↓↔↵⇐⇒⇓⇔∴⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈⌉⌊⌋⟨⟩◊♠♣♥♦</p>

基本上，p标签（和它的间距）消失了。有没有简单的方法来解决这个问题？

Answer 1

实际上解决方案相当简单。只需使用.html（）并确保您不匹配任何重要的HTML语法字符，例如'\'或'＆lt;＆gt;'。

        var str = $('.text').html(),
            letters = '';
        for (var i = 0, len = str.length; i < len; i++) {
            if (str[i].match(/[µ·•¶ß¯‾¤¦¨¡¿ˆ˜°−±÷⁄×¹²³¼½¾ƒ∫∑∞√∼≅≈≠≡∈∉∋∏∧∨¬∩∪∂∀∃∅∇∗∝∠ªº†‡ÀÁÂÃÅÆÇÈÉÊËĒÌÍÎÏĪÐÑÒÓÔÕÖØŒŠÙÚÛÜŪÝŸȲÞàáâãäåāæçèéêëēìíïīðñòóôõöøōœšùúûüýþÿȳΑΒΓΔΕΖΘΛΞΟΠΡΣΦΨΩαβγδεζηθικλμνξοπρςστυφψωℵϖℜϒ℘ℑ←↑→↓↔↵⇐⇒⇓⇔∴⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈⌉⌊⌋◊♠♣♥♦]/i)) {
                letters += '<span style="font:20px Arial;">' + str[i] + '</span>';
            }else {
                letters +=str[i];
            }
        }
        $('.text').html(letters);

Answer 2

如果我理解你的问题。我建议将JavaScript函数集中在其中包含符号的部分，以简化过程。

在课程名称中为您的部分添加字符，例如＆＃39; myChars＆＃39;

<p>sadf sdajkf hksadjfh s</p>
<p>Symbols:</p>
<p class="myChars">¢€£¥©®™‰µ·•…′″§¶ß‹›«»‘’“”&lt;&gt;≤≥–—¯‾¤¦¨¡¿ˆ˜°−±÷⁄×¹²³¼½¾ƒ∫∑∞√∼≅≈≠≡∈∉∋∏∧∨¬∩∪∂∀∃∅∇∗∝∠´¸ªº†‡ÀÁÂÃÅÆÇÈÉÊËĒÌÍÎÏĪÐÑÒÓÔÕÖØŒŠÙÚÛÜŪÝŸȲÞàáâãäåāæçèéêëēìíïīðñòóôõöøōœšùúûüýþÿȳΑΒΓΔΕΖΘΛΞΟΠΡΣΦΨΩαβγδεζηθικλμνξοπρςστυφψωℵϖℜϒ℘ℑ←↑→↓↔↵⇐⇒⇓⇔∴⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈⌉⌊⌋⟨⟩◊♠♣♥♦</p>

然后你的功能：

var str = $('.myChars').text(),
letters = '';
for (var i = 0, len = str.length; i < len; i++) {
      if (str[i].match(/[¢€£¥©®™‰µ·•…′″§¶ß‹›«»‘’“”<>≤≥–—¯‾¤¦¨¡¿ˆ˜°−±÷⁄×¹²³¼½¾ƒ∫∑∞√∼≅≈≠≡∈∉∋∏∧∨¬∩∪∂∀∃∅∇∗∝∠´¸ªº†‡ÀÁÂÃÅÆÇÈÉÊËĒÌÍÎÏĪÐÑÒÓÔÕÖØŒŠÙÚÛÜŪÝŸȲÞàáâãäåāæçèéêëēìíïīðñòóôõöøōœšùúûüýþÿȳΑΒΓΔΕΖΘΛΞΟΠΡΣΦΨΩαβγδεζηθικλμνξοπρςστυφψωℵϖℜϒ℘ℑ←↑→↓↔↵⇐⇒⇓⇔∴⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈⌉⌊⌋〈〉◊♠♣♥♦]/i)) {
           letters += '<span style="font:20px Arial;">' + str[i] + '</span>';
      }else {
          letters +=str[i];
      }
}
$('.myChars').html(letters);

希望这有助于。干杯！

更改某些符号和/或字符的字体

2 个答案: