'In CSS, can I apply an alternative font-feature-setting style to a single letter?

I'm trying to apply a different style (using font-feature-settings: 'aalt';) for a single letter type: an uppercase R. As expected, the whole div that has the style applied gets changed to the stylistic alternate. Is there a way to get it to work on just the R?

javascriptcss


Solution 1:[1]

Is there a way to get it to work on just the R?

Apply the style only to the letters that you want to stylize:

body { font-family: sans-serif; }
.line { display: block; line-height: 1.5rem; }
.stylized { color: red; }
<div>
  <h1><span class="stylized">R</span>ow, <span class="stylized">R</span>ow, <span class="stylized">R</span>ow Your Boat</h1>
  <p>
    <span class="line"><span class="stylized">R</span>ow, row, row your boat,</span>
    <span class="line">Gently down the stream.</span>
    <span class="line">Merrily, merrily, merrily, merrily,</span>
    <span class="line">Life is but a dream.</span>
   </p>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jsejcksn

Related Questions