JS 中整个网站的 font-feature-settings

font-feature-settings for the entire website in JS

提问人:StadtL 提问时间:8/2/2023 最后编辑:StadtL 更新时间:8/2/2023 访问量:35

问:

我想在我的网站上以另一种方式显示字母“w”和“W”font-feature-settings.

我怎样才能在JS的整个网站上以虚拟方式做到这一点?

我需要补充的是font-feature-settings: "ss03" 1;

我现在尝试的是这个。但是这会将我的所有文本转换为段落,我不再看到任何 tatx 样式:

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

编辑:我能够以这种方式解决它

// Get all elements on the page
const allElements = document.getElementsByTagName("*");

// Loop through each element to find occurrences of 'w' and 'W'
for (const element of allElements) {
// Check if the element contains the text 'w' or 'W'
if (element.textContent.includes('w') || 
element.textContent.includes('W')) {
// Add the class ".ss03" to the element
element.classList.add('ss03');
 }
}
javascript html css 字体功能设置

评论

0赞 A Haworth 8/2/2023
你能用Unicode-range来代替从不同的字体中引入这两个字符吗?developer.mozilla.org/en-US/docs/Web/CSS/@font-face/......
0赞 A Haworth 8/2/2023
嗨,我不明白你的解决方案。为什么它不改变元素中 att 字符的外观?(您的跨度解决方案看起来更可行)。

答: 暂无答案