Zeichenbreite ändern

[stobi_de]

Wer sowas braucht, ohne einen komplett anderen Font einzusetzen (ich kannte das noch nicht und finde das sehr nützlich)

font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

[Tommy Herrmann]

Moin Frank,

danke für den Tipp

https://www.w3schools.com/cssref/css3_p ... tretch.php

[Tommy Herrmann]

Habe das gerade mal in Mobirise ausprobiert.

Bei mir wirkt das weder am <div> noch am <p> oder sonst irgendwo

[stobi_de]

Es hat nicht so DEN Effekt, wie beschrieben, aber das condensed funktioniert

Code: Alles auswählen

<div class="schiefer-text">For your own safety.</div>

.schiefer-text {
  font-family: 'arial';
    font-stretch: condensed;
font-style:italic;
    text-align:right;
   width: 400px;
  height: 30px;
  background-color: #fdc300;
  color: white;
  line-height: 30px;
  padding-right: 30px;
  clip-path: polygon(0 0, 400px 0, 390px 100%, 0 100%);
  
  @media (max-width: 768px) {
    width: 200px;
      clip-path: polygon(0 0, 200px 0, 190px 100%, 0 100%);
  }
  @media (max-width: 1200px) {
    width: 300px;
      clip-path: polygon(0 0, 300px 0, 290px 100%, 0 100%);
  }
}