同一字符串的两个不同部分的不同字体系列 [英] Different font-family for two different parts of the same string

问题描述

.my-link::after {
    content: "text \2661";
    font-family: Arial,sans-serif;
}

看看上面的代码，我需要为伪元素的内容设置字体系列.那不会有问题.

Looking at the code above I need to set the font-family for the content of the pseudo element.That's wouldn't be a problem.

但我需要将 text 部分的字体系列设置为 Arial，将 \2661 部分的字体系列设置为 Helvetica.

But I need to set the font-family for the text part to Arial and the font family for the \2661 part to Helvetica.

对于同一字符串的不同部分，基本上是两种不同的字体系列.

Basically two different font-families for different parts of the same string.

有没有办法只用 CSS 或 Sass 来实现这一点?

否则我只能考虑通过 CSS 将伪元素的整个内容的 font-family 设置为 Arial，然后编写一个 JavaScript 函数，通过伪元素内容中的字符串，找到 \2661 部分并将其字体系列更改为 Helvetica.

Otherwise I can just think of setting the font-family for the whole content of the pseudo element via CSS to Arial and then write a JavaScript function, which goes through the string inside the content of the pseudo element, find the \2661 part and changes its font-family to Helvetica.

任何建议、想法、提示等将不胜感激.

Any suggestions, idea, hints etc would be appreciated.

推荐答案

使用 before &达到这个目的之后.确保伪代码正确浮动，它们最终看起来就像在链接之后出现一样.

Use a combination of before & after to achieve this. Ensure that the pseudos are floating right and they'll end up looking like they're both appearing after the link.

https://jsfiddle.net/zxwkjmt3/

假设您的链接是 display:inline-block;

.my-link {
  display: inline-block;
}

.my-link::before {
    content: '\2661';
    float: right;
    font-family: Helvetica,sans-serif;
}
.my-link::after {
    content: 'text';
    float: right;
    font-family: Arial,sans-serif;
}

<a href="#" class="my-link">Link</a>

值得注意的是，避免将伪元素视为嵌套元素，它们不是.它们会提供一点额外的灵活性，但它们的功能有限，如果可能，嵌套实际元素可为您提供最大的灵活性.

It's worth noting, avoid thinking of pseudo's as nested elements, they are not. They'll give with a little extra flexibility but they're limited in what you can do, if possible nesting actual elements gives you the most flexibility.

这篇关于同一字符串的两个不同部分的不同字体系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！