Chang font size only for a single character with CSS

Is it possible to change the size of a specific character using CSS?

For example, in a paragraph I am using font-face开发者_如何学Go: Arial; font-size: 12pt;. I would like that only the letter "a" would appear in size 10.

Is there a way to do that?

Thanks.

---

No. Except for :first-letter and other pseudo-classes, you can't target single characters using CSS. You'd need to wrap the character into an element (e.g. a <span>) to specify a style for it.

You can work around this using Javascript - there are jQuery based solutions for this here on SO. But it's kludgy.

---

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

---

Sorry for digging up this 11 year old thread, but I just now ran into this problem as well.

My use case was to make Tibetan characters bigger on a specific website, because they were barely readable compared to latin characters of the same font size.

As I understand, all the answers here are outdated, as I found the @font-face css at-rule that covers this. It accepts a Unicode range, so should work for a single character as well. Supported by all modern browsers.

So all I needed to do is add the following to my css, which will define a new font called 'Yangpo Tibetan Uni' (of course, modify the url parameter to your liking):

@font-face {
  font-family: 'Yangpo Tibetan Uni';
  src: url("./util/fonts/YagpoTibetanUni-x3jnj.ttf") format("truetype");
  unicode-range: U+0F00-0FFF;
}

And then use your newly defined font like so:

body {
  font-family: /* main font */ 'Raleway', /* and then your override */ 'Yangpo Tibetan Uni';
}

OK, replacing the whole font is one thing, but how to make one character bigger? @font-face also accepts size-adjust parameter (BEWARE!!! This one parameter will not work in Safari, but there are others like font-stretch - take a look what fits your needs):

The size-adjust CSS descriptor defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.

So make the @font-face url point to the original and manipulate the size-adjust value (or other parameters, as per docs).

---

No. You can only target elements (such as a span that contains a single letter) and pseudo-elements (such as :first-letter).

---

You can't do this in a cross-browser-consistent and simple way without javascript. I recommend 'captify' for jquery.

---

Also for accessibility and compatibility and all that it is best not to define specific fonts (try font-family) and sizes in terms of large, larger then use % ontop of that, and define them all as custom span/div styles

e.g

bigletter (font-size:150%);