Lägga till anpassade typsnitt
Svep för att visa menyn
Typsnitt har stor betydelse för utseendet och känslan på en webbplats. Högkvalitativ typografi förbättrar läsbarheten och gör en design mer minnesvärd. Många typsnitt är gratis att använda, medan andra kräver licensiering. Respektera alltid upphovsrättsregler.
Google Fonts-tjänst
Det finns många spännande typsnitt som är fria att använda. Låt oss utforska alternativen som erbjuds av https://fonts.google.com/. Det är enkelt att lägga till ett Google-typsnitt i markupen.
Låt oss först köra nästa exempel, som använder standardtypsnittet. Elementet p har följande egenskaper: font-family (typsnittsnamn), font-size (typsnittsstorlek) och font-weight (typsnittets fetstil).
index.html
styles.css
Egenskapen font-family fungerar inte eftersom vårt projekt ännu inte känner till det anpassade typsnittet "DM Sans". Lägg till typsnittet i projektet genom att använda https://fonts.google.com/.
Klicka på bilden för att se detaljerna tydligare.
I inmatningsfältet "Search fonts", skriv in namnet på det typsnitt du behöver. I detta fall är det "DM Sans". När det visas, klicka på kortet för "DM Sans".
På typsnittets sida, klicka på knappen "Get font".
Nästa steg är att klicka på knappen "Get embed code".
Kopiera därefter länken och klistra in den i HTML-filen för ditt projekt inom <head>-elementet. Det är viktigt att infoga länken före länken till dina egna stilmallar. Detta säkerställer att webbläsaren först laddar de anpassade typsnitten innan några stilar som använder dem tillämpas. När du har lagt till länken kommer "DM Sans" att vara tillgängligt som ett anpassat typsnitt för ditt projekt. Kör nu projektet för att kontrollera att allt fungerar korrekt.
index.html
styles.css
Vi kan observera skillnaden mellan anpassat typsnitt och standardtypsnitt. Dessutom har varje webbläsare sina egna standardtypsnitt. Därför är det viktigt att veta hur man använder anpassade typsnitt på en webbplats.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
