Ik wil niet de font-sizevan tekst veranderen, maar twee onafhankelijke eigenschappen relatief aan de breedte en hoogte.
Dus, door font-width: 50%toe te passen op dit element:
de tekst zou tot de helft worden uitgerekt:
Is dit mogelijk met CSS?
Antwoord 1, autoriteit 100%
CSS3 transformheeft de scalefunctie hiervoor:
p {
display: inline-block;
font-size: 32px;
transform: scale(.5, 1);
}<p>This is text.</p>Antwoord 2, autoriteit 17%
Je kunt proberen het lettertype in de x-richting te schalen.
p{
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
Antwoord 3, autoriteit 5%
Het dichtstbijzijnde wat ik kan vinden is font-weight
Het accepteert niet alleen vetgedrukte, normale maar ook numerieke waarden. 100-900 in stappen van 100.
. Paragraph {font-weight :700;}
Dit in combinatie met hoogte-eigenschappen zou moeten helpen, maar zal je geen volledige oplossing geven
Kijk ook naar de spatiëringseigenschappen, aangezien u op die manier de breedte van de woorden kunt verkleinen
letter-spacing: 2px;
Antwoord 4, autoriteit 3%
Het gebruik van svg-tekst met preserveAspectRatio="none"maakt tekstvervormingen en zeer nauwkeurige positionering mogelijk.
Om aan te passen, draait het allemaal om de viewBox. De weergave blijft native reageren op het formaat van de browser.
De tekst blijft selecteerbaar.
.title {
width: 540px;
height: 40px
}
.content {
width: 300px;
height: 400px
}
.side {
width: 270px;
height: 100px;
color: red;
position: absolute;
right: 30px;
top: 160px;
transform: rotate(44deg)
}<div class="title">
<svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 15" width="100%" height="100%">
<foreignObject x="5" y="1" height="100%" width="100%">
<div>
Hello world!
</div>
</foreignObject>
</svg>
</div>
<div class="content">
<svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 400 200" width="100%" height="100%">
<foreignObject x="55" y="15" height="100%" width="80%">
<div>
The best way to use a hello cheer for introducing players is to have one cheerleader use a megaphone or loudspeaker to announce the players names and stats.
</div>
</foreignObject>
</svg>
</div>
<div class="side">
<svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
<foreignObject x="5" y="15" height="200%" width="100%">
<div>
NOW WITH COLORS!
</div>
</foreignObject>
</svg>
</div>