Skrifttype

The Skrifttypefelt er single-purpose søskende til Typografi feltet: en dropdown, en værdi, skrifttypefamilien. Redaktører vælger fra systemskrifttyper og Google Fonts listen, og din widget modtager familienavnet som en almindelig streng. Inde i Master Addons Widget Builder, der gør det til det lette valg, når en widget kun skal ændre, hvilken skrifttype et element bruger, intet andet.

Feltet Skrifttype understøtter Betingelser, praktisk til at afsløre det kun, når en “brugerdefineret typografi” skifte er tændt, og dens værdi udskrives gennem Twig-syntaks skabelon motor ind i din CSS. Begge guider dækker opsætning og begrænsninger.

I modsætning til Typografifelt, som virker gennem en vælger og ikke har noget skabelontoken, feltet Skrifttype ER et tokenfelt. Du skriver den font-family hersk selv i CSS-panelet og udskriv feltets værdi i det. Den forskel afgør, hvilket af de to felter en given widget har brug for.

Hvad feltet Skrifttype gør #

• Gengiver en skrifttypefamilie-rullemenu i widgettens Elementor-panel, med en liste over systemskrifttyper og Google-skrifttyper.
• Gemmer den valgte familie som en almindelig streng, for eksempel Lora eller Georgia.
• Udskriver den streng igennem {{ your_field_name }}, typisk inde i en font-family regel i CSS-panelet.
• Styrer præcis én egenskab. Størrelse, vægt, afstand, og resten bliver i dit stylesheet eller i separate kontrolelementer.
• Tager et standard familienavn, så widgetten leveres med en bevidst skrifttype.

Har du ikke bygget en widget endnu? Den Widget Builder oversigt er stedet at starte før dokumenterne på feltniveau.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• En brugerdefineret widget åben i Widget Builder editor. Vores eksempel er en pull-quote widget med et skrifttypefelt navngivet quote_font det ændrer kun skrifttypen på citatteksten.

Sådan tilføjes et skrifttypefelt #

Træk Skrifttype felt fra panelet felter til en sektion under Style tab, dens naturlige hjem, selvom enhver fane virker. Dens muligheder åbnes til venstre, når den lander.

Skrifttypefeltindstillinger forklaret #

Optionslisten er kort, hvilket er punktet i feltet:

• Etiket: teksten vist ved siden af dropdownen i Elementor, for eksempel “Citatskrifttype”.
• Navn: den unikke identifikator, dine skabeloner henviser til. Kun bogstaver, tal og understregninger, f.eks quote_font.
• Standard: den slægtsnavnsstreng, widgetten starter med, f.eks Georgia. Vælg noget, der gengiver godt, før nogen rører kontrollen.

Tilslut feltet Skrifttype i dit CSS-panel #

Feltet Skrifttype er et tokenfelt, og CSS-panelet er der, hvor dets token hører hjemme. Udskriv værdien inde i en font-family regel og altid følge det med en fallback stack:

/* CSS panel */
.pq-quote {
  font-family: {{ quote_font }}, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

Tokenet gengives til det valgte familienavn, så reglen ovenfor bliver font-family: Lora, Georgia, serif; når en editor vælger Lora. Størrelse og linjehøjde forbliver din; kontrollen skifter kun skrifttypen.

Tokenet fungerer også i HTML-panelet, for eksempel i en betinget, der skifter en klasse, når en bestemt familie er aktiv, men CSS er det praktiske hjem for det.

Pas på: at vælge en Google Font i denne dropdown indlæser ikke skrifttypefilen. I modsætning til Typografi-gruppekontrollen sætter skrifttypefeltet ikke Google Fonts i kø automatisk, så en valgt webskrifttype gengives som sin fallback, medmindre webstedet indlæser det på en anden måde. Enten har widgeten indlæst selve skrifttypen, en lille JS-panelinjektor, der tilføjer Google Fonts stylesheet-linket, fungerer, eller begrænser forventningerne til skrifttypestakke, som webstedet allerede har. Den fallback-stak efter tokenet er ikke valgfri dekoration; det er, hvad besøgende ser, når familien ikke er indlæst.

En minimal loader i JS panelet ser således ud:

// JS panel
var fam = "{{ quote_font }}";
if (fam && !document.getElementById("pq-font")) {
  var l = document.createElement("link");
  l.id = "pq-font";
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(fam) + "&display=swap";
  document.head.appendChild(l);
}

En subtilitet i den læsser: getElementById vagtnøgler på et fast id, så hvis den samme widget vises to gange på en side med to forskellige familier, indlæses kun den første instans' skrifttype. Den anden falder lydløst tilbage. Hvis flere instanser pr. side er et realistisk scenarie for din widget, skal du bygge id'et fra familienavnet i stedet.

Brug kontrolelementet Skrifttype i Elementor #

Føj din brugerdefinerede widget til en side i Elementor, eller genindlæs editoren, hvis siden allerede var åben. Feltet Skrifttype vises som en dropdown under din etiket; åbn den, og familielisten er søgbar, mens du skriver.

Vælg en familie, og forhåndsvisningsopdateringerne. Hvis widgetten indlæser skrifttypen, trækker den nye skrifttype ind, så snart filen ankommer. Ellers gengives elementet i fallback fra din stak.

Almindelige brugstilfælde #

• Citat og vidnesbyrd widgets hvor kun citatteksten bytter skrifttype.
• Dekorative overskrifter i helte- og bannerwidgets, med brødtekst efterladt uberørt.
• Monogram, drop-cap og etiketelementer der bærer ét udstillingsansigt.
• Widgets, der afslører et enkelt mærkevalg uden at åbne et komplet typografi panel til klienter.
• Betinget klasseskift, sammenligner værdien i HTML-panelet, når én familie har brug for regler for ekstra bogstavafstand.

Tips til at arbejde med feltet Skrifttype #

• Skriv altid en fallback stack. font-family: {{ quote_font }}, Georgia, serif; holder widgetten læsbar, når den valgte skrifttype ikke er indlæst.
• Husk der ikke er nogen auto-kø. Google Fonts, der er valgt her, har brug for en loader i widgetten eller et websted, der allerede indlæser dem; det er feltets ene skarpe kant.
• Nå ud til Typografi, når du har brug for mere. Størrelse, vægt, afstand, responsive værdier og automatisk skrifttypebelastning hører alle til Typografifelt. Skrifttype er kun for familie-sagen.
• Indstil en rigtig standard. En eksplicit startfamilie slår at arve alt, hvad temaet falder i.
• Opbevar tokenet i CSS. En regel i CSS-panelet er nemmere at vedligeholde end inline-stilattributter spredt gennem HTML.
• Forvent ikke en Selector-genvej her. Den naturlige ledninger til dette felt er tokenet i dit eget font-family regel, hvor man også styrer fallbacks.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Font udfører ét job med meget lidt overflade: en familie dropdown i panelet, et streng token i din font-family regel, og fuld kontrol over de tilbagefald tilbage i dine hænder. Indlæs skrifttypen, når du tilbyder Google familier, og træde op til Typografifelt når en widget har brug for det komplette tekststylingpanel. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.