Font er avstanden mellom bokstaver. Hvordan endre bokstavavstand i Word
Definerer avstanden mellom tegn i et element. Nettlesere angir vanligvis avstanden mellom tegn basert på skrifttype, størrelse og innstillinger operativsystem. For å endre denne verdien og bruke denne eiendommen. Det er akseptabelt å bruke en negativ verdi, men i dette tilfellet må du sørge for at tekstens lesbarhet opprettholdes.
kort informasjon
Betegnelser
Beskrivelse | Eksempel | |
---|---|---|
<тип> | Indikerer typen av verdien. | <размер> |
A && B | Verdiene må skrives ut i den angitte rekkefølgen. | <размер> && <цвет> |
A | B | Indikerer at du bare trenger å velge én verdi fra de foreslåtte (A eller B). | normal | small-caps |
A || B | Hver verdi kan brukes uavhengig eller sammen med andre i hvilken som helst rekkefølge. | bredde || telle |
Grupper verdier. | [ beskjære || kryss ] | |
* | Gjenta null eller flere ganger. | [,<время>]* |
+ | Gjenta en eller flere ganger. | <число>+ |
? | Den angitte typen, ordet eller gruppen er valgfri. | innfelt? |
(A, B) | Gjenta minst A, men ikke mer enn B ganger. | <радиус>{1,4} |
# | Gjenta én eller flere ganger atskilt med komma. | <время># |
Verdier
Alle lengdeenheter akseptert i CSS aksepteres som verdier - for eksempel piksler (px), tommer (in), poeng (pt), etc. Beste resultat gir bruk relative enheter, basert på skriftstørrelse (em og ex).
Normal Stiller inn avstanden mellom tegnene som normalt.
Sandkasse
Ole Brumm var alltid ikke uvillig til en liten forfriskning, spesielt klokken elleve om morgenen, for på den tiden var frokosten for lengst over, og lunsjen hadde ennå ikke begynt. Og selvfølgelig ble han fryktelig glad for å se at kaninen tok fram kopper og tallerkener.
div ( bokstavmellomrom: 0 ; )
Eksempel
Kulminasjonen, etter nøye analyse, krysser betydelig ut den ekvatoriale storsirkelen til himmelsfæren, slik det skjedde i 1994 med kometen Skomaker-Levy 9.
Resultat dette eksemplet vist i fig. 1.
Ris. 1. Bruk av egenskapen bokstavavstand
Objektmodell
En gjenstand.style.letterSpacing
Spesifikasjon
Hver spesifikasjon går gjennom flere stadier av godkjenning.
- Anbefaling - Spesifikasjonen er godkjent av W3C og anbefales som standard.
- Kandidatanbefaling ( Mulig anbefaling ) - gruppen ansvarlig for standarden er fornøyd med at den oppfyller sine mål, men krever hjelp fra utviklingsmiljøet for å implementere standarden.
- Forslag til anbefaling Foreslått anbefaling) - på dette stadiet sendes dokumentet til W3C Advisory Council for endelig godkjenning.
- Arbeidsutkast - En mer moden versjon av et utkast som har blitt diskutert og endret for gjennomgang av fellesskapet.
- Redaktørens utkast ( Redaksjonelt utkast) - et utkast til standarden etter endringer ble gjort av prosjektredaktørene.
- Utkast ( Utkast til spesifikasjon) - det første utkastet til standarden.
Håndtere mellomrom mellom bokstaver og ord
1. Avstand mellom ord ordavstand
Angir avstand mellom ord. Positive og negative verdier kan brukes. Med en negativ betydning kan ord overlappe hverandre.
Verdien av ordavstand påvirkes av verdien tekstjusteringsegenskaper ved tekstjustering i bredden. Nedarvet.
Syntaks
P (ordavstand: normal;) p (ordavstand: 2px;)
Ris. 1. Avstand mellom ord
2. Bokstavavstand
Egenskapen angir avstanden mellom bokstaver (sporingsmengde) og symboler. Kan ta positive og negative verdier. Det er tilrådelig å bruke for å øke uttrykksevnen og lesbarheten til overskrifter, definisjoner osv. Nedarvet.
Syntaks
P (bokstavavstand: normal;) p (bokstavavstand: 2px;)
Ris. 2. Endre avstanden mellom bokstaver ved hjelp av egenskapen bokstavavstand
3. Håndtering av mellomrom
Egenskapen håndterer mellomrom mellom ord og linjeskift i et element. Ikke arvet.
hvitt mellomrom | |
---|---|
Verdier: | |
normal | Standardverdi. Bare ett mellomrom settes inn mellom ordene, ytterligere mellomrom forkastes. Tekst pakkes kun når det er nødvendig. |
nowrap | Forbyr linjeskift unntatt når de brukes . |
pre | Mellomrom i teksten ignoreres ikke; nettleseren viser flere mellomrom og linjeskift. |
forhåndsinnpakning | Bevarer mellomrom i tekst ved å legge til linjeskift der det er nødvendig. |
pre-line | Sletter ekstra plasser, bortsett fra i tilfeller . |
første | Setter egenskapsverdien til standardverdien. |
arve | Arver egenskapsverdien fra det overordnede elementet. |
Syntaks
P (hvit-mellomrom: normal;) p (hvit-mellomrom: nowrap;) p (hvit-mellomrom: pre;) p (hvit-mellomrom: pre-wrap;) p (white-space: pre-line;)
4. Stille inn fanestørrelse
For å endre mengden innrykk oppnådd med TAB-tasten, bruk tab-size-egenskapen. Egenskapsverdier ignoreres når ett av følgende er angitt tre betydninger pre-line , normal eller nowrap white-space egenskaper.
Fungerer kun for elementer
Syntaks
Pre (-moz-tab-size: 16;) /* Firefox */ pre (-o-tab-size: 16;) /* Opera 10.6-12.1 */ pre (tab-size: 16;)
MED bruker CSS egenskaper farge Du kan endre tekstfargen til HTML-elementer.
Farge kan stilles inn på følgende måter:
- Ved å bruke fargenavnet (for eksempel vil "rød" sette fargen rød);
- MED bruker RGB verdier (for eksempel "rgb(255,255,255)" vil sette fargen til hvit);
- Ved bruk av heksadesimal verdi(for eksempel vil "#00ff00" settes grønn farge).
Forklaringer:
Den første metoden brukes hovedsakelig til å spesifisere primærfarger, hvis navn er velkjente. For eksempel vil rødt bestemme rødt, blått - blått, hvitt - hvitt.
Den andre metoden kan brukes til å angi alle farger og nyanser.
Syntaks:
Rgb( rød,grønn,blå)
rød et tall fra 0 til 255 som indikerer hvor mye rødt det vil være i den endelige nyansen.
grønn et tall fra 0 til 255 som indikerer hvor mye grønt som vil være i den endelige nyansen.
blå et tall fra 0 til 255 som indikerer hvor mye blått det vil være i den endelige nyansen.
For eksempel rgb(255;0,0) vil sette fargen rød, og rgb(0,255,0) rgb(255,255,0) vi blir gule.
Den tredje metoden tilsvarer funksjonelt den andre, men mer kompakt. I praksis brukes hovedsakelig denne metoden.
Syntaks:
#rødgrønnblå
rød heksadesimalt tall fra 0 til ff som indikerer hvor mye rødt det vil være i den endelige nyansen.
grønn et heksadesimalt tall fra 0 til ff som indikerer hvor mye grønt som vil være i den endelige nyansen.
blå et heksadesimalt tall fra 0 til ff som indikerer hvor mye blått det vil være i den endelige fargen.
For eksempel #ff0000 vil sette fargen rød, og #00ff00 grønn. Blander rødt med grønt #ffff00 vi blir gule.
La oss nå prøve å fargelegge avsnittene grønne ved å bruke alle metodene som er oppført ovenfor:
P (farge:grønn;) p (farge:rgb(0,255,0);) p (farge:#00ff00;)
Merk: Du kan enkelt velge de nødvendige fargenyansene ved å bruke .
Tekstjustering
Bruke CSS-egenskaper tekstjustering Du kan justere teksten til et element horisontalt.
Tekst kan justeres:
- Sentrert (senterverdi);
- Venstre kant (venstre);
- Langs høyre kant (høyre);
- Etter bredde (begrunn).
Merk: Juster tekst justeres ved å strekke alle linjene til samme lengde. Denne innrettingsmetoden brukes ofte i aviser og magasiner.
P.ta1 (text-align:center;) p.ta2 (text-align:left;) p.ta3 (text-align:right;) p.ta4 (text-align:justify;)
Hurtigvisning
tekst-dekorasjonsegenskap
Bruke CSS-egenskaper tekst-dekorasjon Du kan lage HTML-elementet til tekst:
- Understreket (understrekingsverdi)
- Line-through
- Vis en linje over elementteksten (overlinje)
P.td1 (tekstdekor:understreking;) p.td2 (tekstdekorasjon:gjennomstrekning;) p.td3 (tekstdekorasjon:overlinje;)
Hurtigvisning
Tekstdekorasjonsegenskapen med verdien ingen "tømmer" teksten for alle de ovennevnte effektene. Dette kan brukes til å lage ikke-understrekede lenker.
A:link (tekst-dekorasjon:ingen;) a:besøkt (tekstdekorasjon:ingen;)
Hurtigvisning
Merk: Det anbefales ikke å understreke ren tekst, da brukere kan forveksle det med en lenke.
Mellomrom mellom ord og bokstaver i tekst
Bruke CSS-egenskaper avstand mellom bokstavene Du kan øke eller redusere avstanden mellom bokstaver i HTML-tekst elementer.
P.ls1 (bokstavavstand:10px;)
Hurtigvisning
Bruke eiendom ordavstand Du kan øke eller redusere avstanden mellom ord i teksten til HTML-elementer.
P.ws1 (ordavstand:15px;)
Hurtigvisning
Andre egenskaper for CSS-tekststil
For å se detaljert informasjon om hva du vil CSS-eiendom, klikk på navnet.
Gjør det selv
Merk: For å fullføre denne oppgaven må du besøke siden ikke alle egenskapene til tekstdesign ble diskutert i dette kapittelet.
Øvelse 1 ordne elementene i henhold til deres beskrivelse:
1. I dette avsnittet er innrykk mellom bokstaver 17 px, og innrykk mellom ord er 5 px. Dette avsnittet er oransje. 2. Tekst av dette elementet understreket er avstanden mellom bokstavene 15 piksler. Denne paragrafen er grå. 3. Teksten til dette elementet er sentrert, mellomrommet mellom ordene er 10 piksler. Dette elementet er farge #ff3366. 4. Teksten til dette elementet er justert til høyre, innrykk mellom bokstaver er 6 piksler. Teksten er skrevet med små røde bokstaver. 5. Teksten til dette elementet er sentrert, understreket, og avstanden mellom bokstavene er 7 piksler. Teksten er skrevet med store bokstaver Grønn farge.
Aktiver JavaScript for å bruke Disqus-kommentarsystemet.
Alle nettsteder er unike, hver har sin egen originale design. Teksten, som er hovedkomponenten på ethvert nettsted, må samsvare med den generelle stilen. Noen ganger enkel endring fontfamilie og farge er ikke nok til å lage vakker tekst. I dette tilfellet kommer bokstavavstand til hjelp - en egenskap for å endre avstanden mellom bokstaver i CSS
Hvorfor trenger vi bokstavavstandsegenskapen?
Hvis du øker avstanden mellom bokstaver i CSS, kan du få en unik tekststil.
For å lage en unik skrift, må du noen ganger lage mellomrom mellom bokstaver. Den eneste måten å øke avstanden mellom bokstavene på er gjennom CSS. I den utføres denne funksjonen av egenskapen bokstavavstand.
Det er ekstra verktøy i CSS som lar deg endre avstanden mellom bokstaver. Men noen ganger er det det som mangler for god styling. tekstinnhold.
Hvordan endre mellomrom mellom bokstaver? CSS: bokstavavstand
Denne egenskapen er angitt som standard i alle nettlesere. Det gjelder alle moderne nettlesere, og ikke bare (for eksempel Internet Explorer).
Verdien av denne egenskapen arves for alle etterkommere av velgeren. Dette betyr at ved å angi bokstavavstand for body-taggen, vil du endre bokstavavstandsverdien for hele siden.
En ting til: vurder den gitte fonten. Avstanden mellom bokstavene varierer for hver enkelt. Forskjellen er liten, målt i brøkdeler av piksler, men husk det.
Måten denne egenskapen fungerer på er at den legger til innrykk til hver bokstav med høyre side. Det endrer avstanden mellom bokstaver på et mer detaljert nivå. Det fungerer etter margin-venstre-prinsippet. Bokstavavstand kan spesifiseres i forskjellige mengder: relativ (em, rem, ex og andre) og absolutt (px, mm, cm). De mest passende verdiene å bruke er px, rem og em. Selvfølgelig er det best å spesifisere verdien i piksler, da dette er det mest praktiske og best egnet for å endre kortdistanse.
Fyll først siden med innholdet som vi skal teste denne egenskapen på.
For å angi det, åpne CSS-dokumentet og skriv deretter en bokstavavstand: 5px-linje for body-taggen. En slik oppføring vil bety at avstanden mellom bokstavene vil øke med 5 piksler på hele siden (det vil være lik 6 eller 5,5 avhengig av fonten).
Etter at du har skrevet koden ovenfor, vil du ende opp med en nettside som dette:
Positive verdier overstiger vanligvis ikke 3-5 piksler, men ikke alltid. Noen ganger brukes lengre avstander, for eksempel når du oppretter en hovedoverskrift. Det anbefales ikke å gjøre avstanden høyere enn 10px, da teksten vil være uleselig.
Det er også mulig å redusere avstanden mellom bokstaver i CSS. Det er spesifisert på samme måte, men med et "-"-tegn. Som oftest minimumsverdi tilsvarer -1 px. Du kan stille inn -10, til og med -20, men teksten vil være umulig å lese. Hvis du vil lage tekst med små innrykk, ikke bruk en verdi mindre enn 200px.
Praktisk bruk
I CSS-avstand mellom bokstaver brukes til å lage en unik font. Kan også brukes når du lager overskrifter hvis den brukes sammen med skriftstilen: kursiv egenskap og god farge, kan tjene som et alternativ til en god logo.
Dessuten, hvis du bruker denne egenskapen riktig sammen med text-align: center, kan du angi en vakker artikkeltittel for bloggen din.
Bokstavavstand er en flott CSS-egenskap for å endre avstanden mellom bokstaver fra hverandre. Det viktigste er ikke å overdrive det med innrykk.
Som regel for hver font viss størrelse forhåndsinnstilte verdier mellomrom mellom ordene, avstand mellom bokstaver i et ord Og visuell linjehøyde. Det bør bemerkes at avstanden mellom forskjellige bokstaver i fonter med én avstand, for eksempel Courier New, alltid er den samme. I andre typer skrifttyper avhenger avstanden mellom bokstavene av bokstavkombinasjonene - i de fleste tilfeller er den fast, men mellom noen bokstavpar er den bevisst redusert for å visuelt gjøre teksten mer "jevn" og jevnt fordelt. For eksempel er avstanden mellom bokstavene AU mindre enn mellom bokstavene NP, siden bokstavene N og P er rette i form, og bokstavene A og U har skråkanter, dessuten rettet i én retning. Hvis avstanden mellom bokstavene er den samme, vil A og U vises lenger fra hverandre enn H og P. For å dempe denne effekten reduseres avstanden mellom dem litt, noe som resulterer i en visuelt justert tekstlinje. Dette fenomenet er en av de mest slående manifestasjonene av optisk illusjon.
I CSS for tekstblokker kan du justere størrelsen på avstandene mellom ord i teksten, dvs. i hovedsak endre størrelsen på mellomrommet. Du kan også endre avstanden mellom bokstaver i et ord (dvs. lage tett eller sparsom tekst) og kontrollere høyden tekststreng. Linjehøyde er avstanden mellom grunnlinjer to tilstøtende linjer.
Det er ingen analoger av slike egenskaper i HTML. Intervaller kan kun stilles inn vha CSS.
ordavstandsegenskap
Denne egenskapen lar deg angi avstanden mellom ordene. Enhver lengdeenhet er tillatt som verdi, både positiv og negativ. Med negative verdier reduseres avstanden mellom ordene, og med for store verdier kan ord komme for nærme eller til og med "kollidere" inn i hverandre. Dette vil påvirke lesbarheten til teksten negativt, så vær forsiktig når du angir slike verdier. Det er ikke tillatt å spesifisere prosentverdier.
La oss se på et eksempel:
bokstavavstandsegenskap
Denne egenskapen spesifiserer avstanden mellom bokstaver i et ord. Den er satt på samme måte som avstanden mellom ord i alle lengdeenheter. Det er mulig å angi negative verdier, der bokstavene kan være for nær hverandre eller til og med overlappe hverandre. Bruk den derfor forsiktig. Det er ikke tillatt å angi verdien i prosent.
Ved å bruke denne egenskapen kan du tynne ut bokstaver, for eksempel i overskrifter, som vil se ganske originale ut. Det anbefales på den ene siden at avstanden mellom bokstaver økes så betydelig at tittelen visuelt skiller seg ut mot bakgrunnen av vanlig tekst, og på den andre siden bør avstanden ikke være for stor slik at helhetsoppfatningen av teksten blir ikke dårligere.
Begge eiendommene ordavstand Og avstand mellom bokstavene kan brukes sammen fordi når du øker avstanden mellom bokstaver, for å opprettholde lesbarheten og separate ord, kan det hende du må øke avstanden mellom ordene samtidig. Her er et typisk eksempel på en overskriftsdesign:
H1 (ordavstand: 2 eks; bokstavavstand: 0,3 eks) |