通过 JS 为特定字母添加 font-feature-settings

Add font-feature-settings via JS for specific letter

提问人:StadtL 提问时间:7/26/2023 最后编辑:StadtL 更新时间:7/27/2023 访问量:36

问:

我在CSS中使用将一些字体更改为替代字形。font-feature-settings

我想在网站上的所有字母“w”和“W”中添加类“.ss03”

然后在CSS中,我可以设置它的样式

有没有办法在JS中做到这一点?

现在我正在手动完成:

<p> This is a test for te letter <span class="ss03">W</span>

<style\>

.ss03 {
font-feature-settings: "ss03" 1;
}

</style\>
javascript css 字体功能设置

评论


答:

1赞 Alin 7/26/2023 #1

你可以用 JavaScript 来做到这一点

<script>
document.addEventListener('DOMContentLoaded', function() {
  const paragraphs = document.getElementsByTagName('p');

  for (let i = 0; i < paragraphs.length; i++) {
    const paragraph = paragraphs[i];
    const text = paragraph.textContent;

    const replacedText = text.replace(/(W|w)/g, '<span class="ss03">$1</span>');

    paragraph.innerHTML = replacedText;
  }
});
</script>

评论

0赞 StadtL 7/26/2023
感谢您的回答,使用此代码正确显示 W 和 w。但是现在所有文本都转换为段落,例如粗体文本或斜体不再显示。怎么会这样?