Chang Font Size Only for a Single Character with CSS

Chang font size only for a single character with CSS

I don't believe you can, consider using a text editor to do a find/replace 'a' with <span class='a-xxx'>a</span> and then you can use css to do .a-xxx { font-size: 10px; }

css: how to increase one character font-size without increasing whole text line-height?

If you're sure that it won't be the only character in that line, you can use line-height: 0. Otherwise you would have to manually adjust line-height value.

.increased {  font-size: 200%;  line-height: 0}

<p>normal</p><div style="background-color:yellow">.text text text text text text text text text text  text text text text text text text text text text  text text text text text  text text text text text  </div><p>increased (problematic)</p><div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text  text text text text text text text text text text  text text text text text  text text text text text  </div>

Can specific text character change the line height?

My question is which behavior is the correct one.

All of them are correct because we don't have the same default font in all browsers and it's also different depending on the OS.

Is specific character allowed to change line height (I thought it was only supposed to be font dependent)?

Character doesn't change line-height. To be more accurate, line-height is a property that can only be changed by setting line-height but you are probably confusing with the line box that is defined by the line-height and a character alone cannot change it.

Shouldn't line-height: 1 imply it can fit exactly any text?

Not necessarely, line-height:1 means that the line box will be equal to the 1xfont-size ¹ but is the font designed to include all the character inside this space? Probably most of them will do but we don't know.

---

Basically, you have two things to consider. The content area that is defined by the font properties and the line box that is defined by the line-height. We have no control over the first one and we can only control the second one.

Here is a basic example to illustrate:

span { background:red; color:#fff; font-size:20px; font-family:monospace;}
body { margin:10px 0; border-top:1px solid; border-bottom:1px solid; animation:change 2s linear infinite alternate;}
@keyframes change {  from {    line-height:0.2  }    to {    line-height:2  }}

<span >blah_blah</span>

How can we control the size of a special character?

You can use CSS to control it just like any other text.

https://developer.mozilla.org/en-US/docs/CSS/font-size

---

Related Topics