CODEWITHSUNDEEP
cssfonts
j00ls
j00ls

Reputation: 105

CSS: change a single text character

Is there any way to modify one single font character in a text?

I have a webfont where the "-" character does not align correctly with the letters and I would like to move it upwards relative to the other characters.

Is there any way to acchieve this without switching to an image base solution?

Thanks!

Upvotes: 2

Views: 1165

Answers (2)

robbclarke
robbclarke

Reputation: 749

You can wrap the character yourself, or alternatively use jQuery/Javascript to search for that character and wrap it.

Based on your question and some of your answers to people's questions. This works and has been tested.

.moveMe { position: relative; top: -2px; }
<p>Hyphen<span class="moveMe">-</span>moved.</p>
<p>Hyphen-unmoved.</p>

Upvotes: 1

A1raa
A1raa

Reputation: 625

Yes wrap the character inside a <span> so it would look like wo<span>r</span>d. You can then give the span an #id and assign the font to the character inside the id.

The final output would look like wo<span id="change-font">r</span>d.

Using span and positioning the hyphen with position: relative;. Just change the number.

http://codepen.io/anon/pen/MKBaXN

Upvotes: 1

Related Questions