Teksti kaunistamise paksus - CSS-trikid

Anonim

text-decoration-thicknessVara CSS määrab insult paksus viimistlus liin, mida kasutatakse teksti element. text-decoration-lineVäärtus peab olema kas underline, line-throughvõi overlinekajastada paksus vara.

.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )

Süntaks

auto | from-font | |

Väärtused

  • auto: (Vaikimisi) Võimaldab brauseril määrata teksti kaunistamise rea jaoks sobiva paksuse.
  • from-font: Kui esimesel saadaoleval fondil on mõõdikud, mis määravad eelistatud paksuse, kasutab see seda paksust; muidu käitub see nagu automaatne väärtus.
  • : Mis tahes kehtiv pikkus ühikuga määrab teksti kaunistamise ridade paksuse fikseeritud pikkusena. See asendab kogu fondis oleva teabe ja brauseri vaikeseaded.
  • percentage: Määrab teksti kaunistamise ridade paksuse protsendina 1em elemendi fondist.
  • initial: Atribuudi vaikeseade, mis on automaatne.
  • inherit: Võtab vastu vanema kaunistuse paksuse väärtuse.
  • unset: Eemaldab elemendilt praeguse paksuse.

Demo

Muutke text-decoration-thicknessjärgmise demo väärtust, et näha, kuidas atribuut mõjutab elemendi teksti kaunistamist:

Järeltulijate jaoks on see pidev

Pärast elemendi kaunistuse määramist on see kaunistus ka kõigil selle lastel. Kujutage nüüd ette, et soovime ühe lapse kaunistuse paksust muuta:

p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) 
 p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )

See ei toimi, kuna esivanemate elementidega määratud kaunistuse paksust ei saa tühistada. Selle toimimiseks tuleb elemendi enda jaoks seada kaunistuse eripära:

p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )

Protsent ja kaskaad

Selle atribuudi puhul pärandub pikkus fikseeritud väärtusena ja seda ei muudeta fondiga. Teisest küljest pärib protsent suhtelise väärtusena ja seetõttu skaala muutub koos fondi muutustega selle pärimisel.

p ( text-decoration-thickness: 20%; ) 
 p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )

Järgmine demo näitab võrdlust em ja protsentväärtuste vahel pärimise korral ja nagu näete, vasakul küljel (milles me emi kasutame) on päritud väärtus fikseeritud pikkusega. See tähendab, et see ei muutu fondi muutumisega. Paremal küljel pärib tekst siiski suhtelise väärtuse (antud juhul 20%); seetõttu paksus skaalal koos fondi muutusega.

Ehkki spetsifikatsiooni praegune tööprojekt viitab protsentuaalsetele väärtustele text-decoration-thickness, on tegelik tugi praegu piiratud Firefoxiga.

Kasutamine koos text-decoration

CSS-i tekstikaunistuse mooduli 4. taseme spetsifikatsiooni praegune töökavand sisaldab text-decoration-thicknessväärtust text-decorationlühikese omaduse omaduses.

.link ( text-decoration: underline solid green 1px; ) 
 /* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )

Kuigi text-decorationseda toetatakse hästi, text-decoration-thicknesspiirdub kaasamise tugi praegu Firefoxiga.

Brauseri tugi

Tunnusjoon IE Edge Firefox Chrome Safari Ooper
Kinnisvara Ei Ei 70 Ei 12.1 Ei
Protsendid Ei Ei 76 Ei Ei Ei
Lühike Ei Ei 70 Ei Ei Ei
Tunnusjoon Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mini
Kinnisvara Ei Ei Ei 12.2 Ei
Protsendid Ei Ei Ei Ei Ei
Lühike Ei Ei Ei Ei Ei
Allikas: caniuse

Märkused

  • Varem kutsuti varem text-decoration-width, kuid seda värskendati CSS-i tekstikaunistamise mooduli 4. taseme spetsifikatsiooni 2019. aasta tööprojektis.
  • Brauser peab kasutama vähemalt 1 seadme pikslit.