css - 如何格式化单个 html a href 文本以具有多个 css 属性（两个不同的字体系列）

Question

我想在一个 href 上使用两个不同的字体系列创建一个带有 CSS 的徽标

例如

<style>
    a#logo{
        "LogoWith" - font-family:sans;
        "TwoFontFamilies" - font-family:Ariel;
    }

</style>

<a id="logo" href="#">LogoWithTwoFontFamilies</a>

我知道我写的 CSS 是错误的。我似乎无法找到在单个字符串上应用两种不同字体系列的解决方案。

Answer 1

只需在a标签中间使用跨度：

<style>
   a#logo .oneFont { font-family: sans-serif; }
   a#logo .twoFont { font-family: Arial; }
   a#logo .redFont { color: red; }
   a#logo .blueFont { color: blue; }
</style>

<a id="logo" href="#">
    <span class="oneFont">LogoWith</span>
    <span class="twoFont">TwoFontFamilies</span>
    <span class="redFont">AsManyAsYou</span>
    <span class="blueFont">WantToUse</span>
</a>