Prawie skomplikowane lub naucz się CSS3. Część 4. 1. Czcionki w dokumencie HTML. Właściwości rodziny czcionek i @ czcionki-twarzy

Witajcie drodzy czytelnicy strony remontcompa.ru! Nazywam się Roman Nahvat i przedstawiam wam czwartą część serii artykułów na temat języka CSS. W tej części zajmiemy się różnymi właściwościami CSS do formatowania tekstu w dokumencie HTML. Ponieważ formatowanie tekstu w CSS jest dość obszernym tematem, czwarta część zostanie podzielona na kilka części. Nikomu nie jest tajemnicą, że projekt strony w dużej mierze zależy od typu komponentu tekstowego. CSS ma wiele właściwości formatowania tekstu w dokumencie HTML. Te właściwości pozwalają przypisywać do tekstu czcionki, kolor, rozmiar, odstępy między wierszami i inne cechy. Na przykład właściwości rodziny czcionek CSS i właściwości @ font-face, które przyjrzymy się dziś, zostały zaprojektowane do pracy z czcionkami na stronie internetowej..

Prawie skomplikowane lub naucz się CSS3. Część 4. 1. Czcionki w dokumencie HTML. Właściwości rodziny czcionek i @ czcionki-twarzy

Każda czcionka jest inna na swój sposób i różni się stylem od innej czcionki. Mimo to czcionki mają wspólne i wspólne funkcje. Ta lub inna czcionka może należeć do określonej rodziny. Na przykład czcionka Times New Roman należy do rodziny serif (czcionki serif), a czcionka Arial należy do rodziny sans-serif (czcionki sans-serif). Istnieje również rodzina monospace (czcionki należące do tej rodziny mają znaki o tej samej stałej szerokości), a czcionki kursywne imitują pismo odręczne. Poniższa tabela pokazuje rodziny czcionek i niektórych przedstawicieli tych rodzin

Właściwość font-family CSS służy do określania czcionki tekstu, który ma być użyty w elemencie dokumentu HTML. Czcionkę można określić na dwa sposoby: Pisząc nazwę czcionki jako wartość właściwości font-family (na przykład font-family: arial) Pisząc nazwę rodziny font jako wartość właściwości font-family (na przykład font-family: serif) Określając czcionkę za pomocą właściwości font-family, należy wziąć pod uwagę fakt, że sama przeglądarka internetowa nie ma żadnych wbudowanych czcionek. Do wyświetlania tekstu na stronie internetowej używane są czcionki zainstalowane w systemie operacyjnym na komputerze użytkownika. Właściwość rodziny czcionek CSS umożliwia określenie nie jednej czcionki, ale kilku czcionek jako wartości, oddzielając ich nazwy przecinkami. Powszechną praktyką jest wskazywanie nazwy rodziny na końcu listy czcionek. Odbywa się to w przypadku, gdy czcionki określone jako wartość właściwości font-family nie są dostępne w systemie operacyjnym użytkownika. Jeśli określisz kilka czcionek jako wartość właściwości font-family, przeglądarka internetowa po napotkaniu pierwszej określonej czcionki sprawdza, czy jest ona zainstalowana na komputerze użytkownika. Jeśli ta czcionka istnieje, przeglądarka internetowa używa jej jako czcionki elementu na stronie internetowej. Jeśli czcionka określona jako pierwsza jako wartość właściwości font-family nie jest ustawiona, sprawdzana jest druga czcionka itp. Jeśli żadna z określonych czcionek nie zostanie znaleziona, przeglądarka internetowa wybierze odpowiednią czcionkę z określonej rodziny czcionek. Utwórz dokument HTML o następującej strukturze i zapisz go na dysku flash w folderze CSS pod czcionką nazwy i rozszerzeniem .html

W dokumencie HTML font.html z tagami

i

utwórz dwa akapity z pewnym tekstem

Otrzymujemy następujący rodzaj strony font.html

Również w folderze CSS na dysku flash zapisz plik stylów fonts.css

Przypisz identyfikatory font1 i font2 odpowiednio do pierwszego i drugiego akapitu

Za pomocą selektora identyfikatora w arkuszu stylów fonts.css przypisz czcionki Georgia, Times New Roman, Times do tekstu pierwszego akapitu, pisząc linię # font1 rodzina czcionek: Georgia, „Times New Roman”, Times, serif. Możesz zwrócić uwagę, że po nazwach czcionek podana jest ich nazwa zwyczajowa (szeryf)

Otrzymujemy następujące

Przypisując czcionkę do elementu w dokumencie HTML, należy również wziąć pod uwagę format samej czcionki, ponieważ różne przeglądarki internetowe obsługują różne formaty czcionek. Aby wyświetlać tę samą czcionkę w różnych przeglądarkach internetowych, musisz podać je w różnych formatach

Osadzone czcionki Open Type (z rozszerzeniem .eot) są obsługiwane tylko w przeglądarce Internet Explorer.

Czcionki TrueType (.ttf) i OpenType (.otf) są obsługiwane przez wszystkie nowoczesne przeglądarki internetowe. Jeśli chodzi o obsługę czcionek TrueType i OpenType w programie Internet Explorer, od wersji 6 do wersji 8 czcionki TrueType i OpenType nie są obsługiwane przez tę przeglądarkę, a wersje 9, 10 i 11 programu Internet Explorer obsługują tylko czcionki TrueType i OpenType częściowo

Czcionki Web Open Font (.woff) są skompresowaną wersją czcionek TrueType lub OpenType i są obsługiwane przez wszystkie nowoczesne przeglądarki internetowe, a także Internet Explorer, począwszy od wersji 9

Czcionki z rozszerzeniem .woff2 są najnowszą wersją formatu Web Open Font i są obsługiwane przez wszystkie nowoczesne przeglądarki internetowe, jednak żadna wersja przeglądarki Internet Explorer nie obsługuje czcionek z tym rozszerzeniem

Skalowalne czcionki grafiki wektorowej (.svg), a także TrueType, OpenType i Web Open Font są obsługiwane przez nowoczesne przeglądarki internetowe, w tym na urządzeniach mobilnych

Ustawmy czcionkę dla tekstu drugiego akapitu na stronie font.html, udostępniając go przeglądarce internetowej w różnych formatach. Witryna Google Fonts pod adresem https://fonts.google.com zawiera ponad 800 bezpłatnych czcionek należących do różnych rodzin.

Wyświetlamy czcionki szeryfowe na stronie Google Fonts, zaznaczając odpowiednie pole.

Na przykład dla tekstu drugiego akapitu strony font.html ustaw czcionkę o nazwie IM Fell DW Pica SC. Kliknij znak plus, aby wybrać tę czcionkę.

Następnie kliknij przycisk pobierania

Zapisz archiwum z plikiem czcionki IM Fell DW Pica SC na dysku flash w folderze CSS

Po rozpakowaniu pobranego archiwum w folderze IM_Fell_DW_Pica_SC widzimy plik czcionek IMFePIsc28P

Pobrany plik czcionek ma rozszerzenie .ttf, co oznacza, że ​​jest czcionką formatu TrueType. Jak widzieliśmy powyżej, czcionki z rozszerzeniem .ttf nie są obsługiwane przez Internet Explorer. Ponieważ chcemy, aby ta czcionka była wyświetlana w dowolnej przeglądarce internetowej, musimy przekonwertować ją na inne formaty, w tym format Embedded Open Type, który jest obsługiwany przez przeglądarkę internetową Internet Explorer w wersji 6-11

Aby przekonwertować pobrany plik czcionki IMFePIsc28P.ttf na inne formaty, przejdź do https://www.fontsquirrel.com/tools/webfont-generator i kliknij przycisk Prześlij czcionki

Wybierz pobrany plik czcionki IMFePIsc28P.ttf i kliknij Otwórz

Zaznacz opcję Tak, czcionki, które przesyłam, są zgodne z prawem do osadzania w Internecie, a także ustaw przełącznik na Expert

Umieść znaczniki wyboru przed formatami, w których chcemy przekonwertować plik czcionki IMFePIsc28P.ttf

Kliknij Pobierz zestaw

Zapisz archiwum z czcionką IM_Fell_DW_Pica_SC przekonwertowaną na różne formaty na dysku flash w folderze CSS

Wchodzimy do folderu webfontkit-20190307-050537 i widzimy pliki czcionek IM_Fell_DW_Pica_SC z rozszerzeniami .eot, .svg, .ttf, .woff, .woff2. Interesuje nas również plik arkusza stylów z rozszerzeniem .css, który wyświetla kod właściwości CSS @ font-face, który wykorzystamy do połączenia czcionki IM_Fell_DW_Pica_SC w różnych formatach ze stroną internetową font.html

Właściwość CSS @ font-face pozwala używać różnych czcionek, nawet jeśli nie są zainstalowane na komputerze użytkownika. Rozważ bardziej szczegółowo kod css w pliku stylesheet.css. Wewnątrz właściwości @ font-face znajduje się kolejna właściwość rodziny czcionek CSS, która nadaje czcionce nazwę. Nazwa czcionki będzie używana w przyszłości do wskazania czcionki w tekście (w naszym przypadku dla tekstu drugiego akapitu na stronie font.html). Właściwość src informuje przeglądarkę internetową o ścieżce do plików czcionek

Skopiuj kod CSS z pliku stylesheet.css, a następnie wklej go do pliku stylów fonts.css, który jest podłączony na stronie internetowej font.html. Otrzymujemy następujące

Ponieważ na stronie font.html przypisaliśmy identyfikator do drugiego akapitu o nazwie font2, dlatego w pliku stylów fonts.css za pomocą selektora identyfikatora przypiszemy tekst w drugim akapicie do czcionki o nazwie określonej jako wartość właściwości font-family, a mianowicie im_fell_dw_pica_scregular

W pliku stylów fonts.css wpisz wiersz # font2 font-family: 'im_fell_dw_pica_scregular'

Aby tekst drugiego akapitu był wyświetlany czcionką o nazwie im_fell_dw_pica_scregular, skopiuj pliki tej czcionki w różnych formatach z folderu webfontkit-20190307-050537 do folderu CSS

Otrzymujemy następujące

Jeśli otworzysz stronę font.html w przeglądarce internetowej, zobaczysz, że tekst drugiego akapitu był wyświetlany czcionką IM Fell DW Pica SC