Tilføjelse af Brugerdefinerede Skrifttyper til en Webside
Skrifttyper har stor betydning for et websites udseende og stemning. Kvalitetsrig typografi forbedrer læsbarheden og gør designet mere mindeværdigt. Mange skrifttyper er gratis at bruge, mens andre kræver licens; respekter altid ophavsretten.
Google Fonts-tjeneste
Der findes mange spændende skrifttyper til fri afbenyttelse. Lad os undersøge mulighederne fra https://fonts.google.com/. Det er enkelt at tilføje en Google-skrifttype til markup.
Lad os først køre det følgende eksempel, som bruger standardskrifttypen. p-elementet har følgende egenskaber: font-family (skrifttypenavn), font-size (skriftstørrelse) og font-weight (skriftens fedhed).
index.html
styles.css
Egenskaben font-family fungerer ikke, fordi vores projekt endnu ikke kender til den brugerdefinerede skrifttype "DM Sans". Tilføj skrifttypen til projektet ved at bruge https://fonts.google.com/.
I inputfeltet "Search fonts" indtastes navnet på den ønskede skrifttype. I dette tilfælde "DM Sans". Når skrifttypen vises, vælges kortet for "DM Sans".
På skrifttypens side vælges knappen "Get font".
Klik derefter på knappen "Get embed code".
Kopier til sidst linket og indsæt det i HTML-filen for dit projekt inden for <head>-elementet. Det er vigtigt at indsætte linket før linket til dine egne stilarter. Dette sikrer, at browseren først indlæser de brugerdefinerede skrifttyper, før der anvendes stilarter, der bruger dem. Når du har tilføjet linket, vil "DM Sans" være tilgængelig som en brugerdefineret skrifttype til dit projekt. Lad os nu køre projektet for at verificere, at alt fungerer korrekt.
index.html
styles.css
Vi kan observere forskellen mellem brugerdefineret skrifttype og standardskrifttype. Derudover har hver browser sine egne standardskrifttyper. Derfor er det vigtigt at vide, hvordan man bruger brugerdefinerede skrifttyper på et websted.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
How do I add a Google Font to my HTML file?
What is the purpose of the preconnect links in the head section?
Can you explain the difference between default and custom fonts?
Fantastisk!
Completion rate forbedret til 2.56Tilføjelse af Brugerdefinerede Skrifttyper til en Webside
Stryg for at vise menuen
Skrifttyper har stor betydning for et websites udseende og stemning. Kvalitetsrig typografi forbedrer læsbarheden og gør designet mere mindeværdigt. Mange skrifttyper er gratis at bruge, mens andre kræver licens; respekter altid ophavsretten.
Google Fonts-tjeneste
Der findes mange spændende skrifttyper til fri afbenyttelse. Lad os undersøge mulighederne fra https://fonts.google.com/. Det er enkelt at tilføje en Google-skrifttype til markup.
Lad os først køre det følgende eksempel, som bruger standardskrifttypen. p-elementet har følgende egenskaber: font-family (skrifttypenavn), font-size (skriftstørrelse) og font-weight (skriftens fedhed).
index.html
styles.css
Egenskaben font-family fungerer ikke, fordi vores projekt endnu ikke kender til den brugerdefinerede skrifttype "DM Sans". Tilføj skrifttypen til projektet ved at bruge https://fonts.google.com/.
I inputfeltet "Search fonts" indtastes navnet på den ønskede skrifttype. I dette tilfælde "DM Sans". Når skrifttypen vises, vælges kortet for "DM Sans".
På skrifttypens side vælges knappen "Get font".
Klik derefter på knappen "Get embed code".
Kopier til sidst linket og indsæt det i HTML-filen for dit projekt inden for <head>-elementet. Det er vigtigt at indsætte linket før linket til dine egne stilarter. Dette sikrer, at browseren først indlæser de brugerdefinerede skrifttyper, før der anvendes stilarter, der bruger dem. Når du har tilføjet linket, vil "DM Sans" være tilgængelig som en brugerdefineret skrifttype til dit projekt. Lad os nu køre projektet for at verificere, at alt fungerer korrekt.
index.html
styles.css
Vi kan observere forskellen mellem brugerdefineret skrifttype og standardskrifttype. Derudover har hver browser sine egne standardskrifttyper. Derfor er det vigtigt at vide, hvordan man bruger brugerdefinerede skrifttyper på et websted.
Tak for dine kommentarer!
