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