-1

Lärande HTML del 9: Hur man ändrar textfärg och typsnitt i HTML

Färgval på text och typsnitttillämpas på HTML-dokument som vi gör är en av de viktiga sakerna som behöver uppmärksamhet och övervägande. Där teckensnitt är den typ av bokstäver som används i ett dokument.

Det är flera saker vi måste vara uppmärksamma påtill exempel om typsnitt som används i enlighet med webbdesign, om typsnitt som används gör det lätt för besökare att läsa innehåll på webbplatsen, om typsnittet är i enlighet med webbplatsens tema eller ämne eller innehållet och om färgen på den text som används är i enlighet med bakgrunden och inte gör det svårt för besökarna att läs texten och så vidare.

HTML i sig ger elementspecifikt för att justera tillämpningen av teckensnitt och färger i HTML-dokument. Det finns många typer av teckensnitt som vi kan använda men vi måste också komma ihåg att teckensnitten som kommer att visas i webbläsaren som helhet kommer från användarens dator. Inget problem om den webbläsare som används kommer från vår dator men om den öppnas i en webbläsare på en annan dator kan webbdesignen som har utformats bli kaotisk eftersom den typ av typsnitt som används inte är tillgänglig på den datorn.

Det är därför standardteckensnitt användsallmänt tillgängligt på Windows, Linux, Mac OS och andra. Standardteckensnitt stöds vanligtvis av de flesta webbläsare så att du inte behöver oroa dig. Följande typer av standardteckensnitt du kan använda:

1. Serif-typsnitt

Serif-teckensnitt är en typ av typsnitt som har beni varje brev som Times New Roman och Georgia. Denna typ av typsnitt tenderar att vara snabb och lättläst så det används vanligtvis för pappersmaterial.

2. Monospace typsnitt

Monospace-typsnitt är typsnitt vars karaktärer har samma bredd som Courier, Courier New och Andale Mono. På grund av dess natur används detta teckensnitt generellt för att skriva program.

3. Sans-Serif typsnitt

Sans-serif-teckensnittet är en typsnitt som inte är dethar ben i varje brev som Arial, Verdana, Trebuchet MS, Helvetica och Calibri. Detta teckensnitt används ofta som en typsnitt på webbplatser.

4. Cursive typsnitt

Cursive typsnitt är en typ av typsnitt som imiterar kalligrafi eller handskrift såsom Comic Sans. Detta teckensnitt används vanligtvis för aspekter av att skriva som inte är för formella.

5. Fantasy typsnitt

Fantasy-typsnitt är en typ av typsnitt som är visuellt med specialteckensnitt som teckensnittsmatris, Disney och andra och används sällan för sidtext.

Så att du bättre förstår textfärgmaterialet och typsnitt i HTML, låt oss titta på förklaringen nedan:

Elementteckensnitt

Med teckensnitt kan du justera eller ändra färg och storlek på en text. Du kan också använda teckensnittelement som har tillhandahållits av HTML.

Användningen av detta element markeras med taggen <0000 och slutar med taggen </font> Ändring av färg och storlek på texten görs med attributen som finns i teckensnittelementet, nämligen:

attribut	funktion
Face	Anger vilken typ av typsnitt som används på webbsidan
färg	Ange färgen på den använda texten
storlek	Uttrycker storleken på en text med värdena 1 till 7

Här är ett exempel på kod för att använda teckensnitt i HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Font</title>
</head>
<body>
<p><font face="Courier New" color="green" size="3">Claudio Andres Bravo Munoz menandatangani kontrak sebagai kiper FC Barcelona pada musim panas 2014 berasal dari Real Sociedad. Lahir pada 13 April 1983, di kota kecil Viluco de Buin, di daerah Santiago Cile. Ia mulai bermain sepak bola sejak kecil, walaupun awalnya bukanlah sebagai seorang kiper, sebaliknya ia bermain sebagai seorang striker dan kemudian menjadi pemain bertahan.</font></p>
</body>
</html>

När koden ovan har körts i webbläsaren ser den ut som bilden nedan:

I sin nuvarande användning är taggen <0000 endaststöds av HTML 4.01 men stöds inte ens bort av HTML5. Det beror på att användningen av taggen <atible kan ersättas med CSS där CSS-funktioner är mer överlägsna och effektivare än taggen <REE.

Följande är ett exempel på att använda CSS i teckensnittinställningar i HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan CSS - FONT di HTML</title>
<style type="text/css">
#p{
color: #ff00ff;
font-size: 20px;
font-weight: bold;
font-family:Rockwell, Calibri, Monospace;
font-style : oblique; }
#p1{
color:#0000FF;
font-size: 1em;
font-weight: normal;
font-variant: small-caps;
font-family: Andale Mono;}
</style>
</head>
<body>
<p id="p">Contoh penggunaan CSS untuk mengatur font style pada suatu teks di HTML</p>
<p id="p1">Contoh Berikutnya Ini</h5>
</body>
</html>

Resultatet kommer att se ut som bilden nedan:

användning av teckensnitt i html och css

När du ser CSS-koden och bildendet ser ut i webbläsaren, naturligtvis har du många frågor om vilka typsnittegenskaper i koden ovan är. Här ger jag en liten förklaring en och en (men kom ihåg att vi fortfarande fokuserar på HTML först, inte CSS):

A. CSS-teckenstorlek

Teckensnittstorlek används för att bestämma storleken påtexttecknet som ska visas. Så du kan tillämpa olika teckenstorlekar för varje text i ett HTML-dokument. Du kan använda pixel-, em- eller% -enheter för att bestämma teckenstorleken som exemplet i den föregående koden, som är:

#p{ font-size: 20px; }
#p1{ font-size: 1em; }

Det rekommenderas att använda em-enhetersnarare än en pixel där 1em är 16 pixlar. Men om du är mer bekväm med att använda pixlar är det inte heller något problem. I exemplet # p1 {font-size: 1em; }, pixelvärdet är 16 pixlar eftersom 16 pixlar / 16 = 1em.

B. CSS-typsnitt

Teckensnittfamiljen används för att bestämma vilken typ av typsnitt som används på HTML-dokument. Som exempel kan du titta på ett exempel på att använda font-familjen i den föregående koden, som är:

#p{ font-family:Rockwell, Calibri, Monospace;}
#p1{ font-family: Andale Mono;}

I #p finns det tre typsnitt, nämligen Rockwell,Calibri och Monospace. Vilket innebär att den typ av typsnitt som kommer att tillämpas först är Rockwell. Men om Rockwell-typsnittet inte är tillgängligt på användarens dator blir den typsnitt som kommer att tillämpas Calibri. Om det inte är tillgängligt, använd sedan Monospace, som är standardteckensnitt.

C. CSS-teckensvikt

Teckensnittvikten används för att skriva ut fetstil, här är exempel på koden
tidigare:

#p{ font-weight: bold;}
#p1{ font-weight: normal};

D. CSS-typsnitt

Teckensnittstil används för att göra tekniken i kursiv, där du kan använda 3 värden, nämligen normala, kursiv och sneda. Följande är ett exempel på att använda teckensnittstil:

#p{ font-style : oblique;} // Teks ditampilkan berbentuk condong
#p1{ font-style : normal;} // Teks ditampilkan biasa tanpa style
#p2(font-style : italic;} // Teks ditampilkan dalam huruf miring

E. CSS-teckensnittsvariant

Variantteckensnitt används för att skriva ut text med alla stora bokstäver. Här är ett exempel på dess användning:

#p{ font-variant: normal;} // Teks normal
#p1{ font-variant: small-caps ;} // Teks ditampilkan dalam huruf kapital semua

Efter att ha läst artikeln ovan, hoppas jag att dukan ändra färg och typsnitt i ditt HTML-dokument. Nästa HTML-handledning handlar om att skapa citat i HTML med hjälp av q- och blockquote-taggarna.

</ P>

Läs mer: