Menu
I am using an embedded font for the top navigational elements on a site Helvetica65 and at 16px it is the perfect WIDTH but I need it to be about 90% of it's current height.
In Photoshop, the solution is simple - adjust the vertical scaling.
Is there a way to do essentially the same thing using CSS? And if so, how well is it supported?
Here is a jsFiddle of the basic nav coding.
751
use CSS transform:scaleY(yValue) to stretch it vertically, on the Y axis. This might pixelate the text in some browsers. An alternative is to use SVG text, then apply transform="scale(0, yValue)" attribute, which will not pixelate (it's a vector!).
Syntax: font-size-adjust: number|none|initial|inherit; Below are the examples that illustrates the use of font-size-adjust property.
Using em Units A more suitable CSS unit for font sizes is the em. The em is a scalable unit, 1em is equal to the current font size; so if the parent's font size is 16px, 1em is 16px and 2em is 32px. The important thing to remember is that the em unit is relative to its parent.
The font-size-adjust property in CSS is used to adjusts the font size based on the height of lowercase rather than capital letters and gives the better control of the font size. It is very useful when the text has given multiple styles and has adjust the font while changing in between those styles.
transform property can be used to scale text:
.menu li a { color: #ffffff; text-transform: uppercase; text-decoration: none; font-family: "HelveticaNeue-Medium", sans-serif; font-size: 14px; display: inline-block; transform: scale(1, 1.5); -webkit-transform: scale(1, 1.5); /* Safari and Chrome */ -moz-transform: scale(1, 1.5); /* Firefox */ -ms-transform: scale(1, 1.5); /* IE 9+ */ -o-transform: scale(1, 1.5); /* Opera */ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
