HTML - czcionki

Czcionki odgrywają bardzo ważną rolę w uczynieniu strony internetowej bardziej przyjazną dla użytkownika i zwiększeniu czytelności treści. Krój i kolor czcionki zależą całkowicie od komputera i przeglądarki używanej do przeglądania strony, ale możesz użyć HTMLtag, aby dodać styl, rozmiar i kolor do tekstu w witrynie. Możesz użyć<basefont> , aby nadać całemu tekstowi ten sam rozmiar, twarz i kolor.

Znacznik czcionki ma trzy atrybuty o nazwie size, color, i faceaby dostosować czcionki. Aby zmienić dowolny atrybut czcionki w dowolnym momencie na swojej stronie internetowej, po prostu użyj tagu . Tekst, który następuje, pozostanie zmieniony aż do zamknięcia znacznikiem . Możesz zmienić jeden lub wszystkie atrybuty czcionki w jednym znaczniku .

Note- Czcionka i tagi basefont są przestarzałe i powinno zostać usunięte w przyszłej wersji HTML. Dlatego nie należy ich raczej używać, zaleca się używanie stylów CSS do manipulowania czcionkami. Wciąż jednak dla celów edukacyjnych, ten rozdział szczegółowo objaśni czcionkę i znaczniki basefont.

Ustaw rozmiar czcionki

Możesz ustawić rozmiar czcionki zawartości za pomocą sizeatrybut. Zakres akceptowanych wartości wynosi od 1 (najmniejsza) do 7 (największa). Domyślny rozmiar czcionki to 3.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

To da następujący wynik -

Względny rozmiar czcionki

Możesz określić, o ile rozmiarów powinno być większych lub o ile mniejszych niż wstępnie ustawiony rozmiar czcionki. Możesz to określić jak lub 

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

To da następujący wynik -

Ustawianie kroju czcionki

Możesz ustawić krój czcionki za pomocą atrybutu twarzy, ale pamiętaj, że jeśli użytkownik przeglądający stronę nie ma zainstalowanej czcionki, nie będzie jej mógł zobaczyć. Zamiast tego użytkownik zobaczy domyślną krój czcionki stosowaną na komputerze użytkownika.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

To da następujący wynik -

Określ alternatywne kroje czcionek

Gość będzie mógł zobaczyć twoją czcionkę tylko wtedy, gdy ma tę czcionkę zainstalowaną na swoim komputerze. Dlatego można określić dwie lub więcej alternatywnych krojów czcionek, wymieniając nazwy czcionek oddzielone przecinkiem.

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

Po załadowaniu strony przeglądarka wyświetli pierwszą dostępną czcionkę. Jeśli żadna z podanych czcionek nie jest zainstalowana, wyświetli się domyślny krój czcionki Times New Roman .

Note - Sprawdź pełną listę HTML Standard Fonts.

Ustawianie koloru czcionki

Możesz ustawić dowolny kolor czcionki, używając atrybutu koloru . Możesz określić żądany kolor za pomocą nazwy koloru lub kodu szesnastkowego dla tego koloru.

Note - Możesz sprawdzić pełną listę HTML Color Name with Codes.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

To da następujący wynik -

Element <basefont>

Element <basefont> ma ustawiać domyślny rozmiar, kolor i krój czcionki dla wszystkich części dokumentu, które nie są zawarte w znaczniku . Możesz użyć elementów , aby nadpisać ustawienia <basefont>.

Znacznik <basefont> przyjmuje również atrybuty koloru, rozmiaru i twarzy i będzie obsługiwał względne ustawienie czcionki, podając rozmiarowi wartość +1 dla rozmiaru większego lub -2 dla dwóch rozmiarów mniejszych.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

To da następujący wynik -