CSS Веб-безпечні шрифти
Що таке веб-безпечні шрифти
Веб-безпечні шрифти - це шрифти, які універсально встановлюються в усіх браузерах і на всіх пристроях.
Резервні шрифти
Однак 100% повністю безпечних веб-шрифтів не існує. Завжди є шанс, що шрифт може бути не знайдений або встановлений неправильно.
Тому дуже важливо завжди використовувати резервні шрифти.
Це означає, що вам слід додати список схожих "резервних шрифтів" у властивості font-family
. Якщо перший шрифт не працює, браузер спробує використовувати наступний, потім знову наступний і т.д. Завжди закінчуйте список загальною назвою сімейства шрифтів.
Приклад
Тут є три типи шрифтів: Tahoma, Verdana та sans-serif. Другий та третій шрифти є резервними на випадок, якщо перший не знайдено.
p {
font-family: Tahoma, Verdana, sans-serif;
}
Спробуйте самі »
Найкращі веб-безпечні шрифти для HTML та CSS
В наступному списку представлені кращі веб-безпечні шрифти для HTML та CSS:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Примітка: Перед тим, як опублікувати свій вебсайт, завжди перевіряйте, як ваші шрифти відображаються в різних браузерах і на різних пристроях, та завжди використовуйте резервні шрифти!
Arial (sans-serif)
Arial - найбільш широко використовуваний шрифт як в Інтернеті, так і в друкованих ЗМІ. Arial також є шрифтом за замовчуванням в Документах Google.
Arial - один із найбільш веб-безпечних шрифтів, доступний в усіх основних операційних системах.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Verdana (sans-serif)
Verdana - дуже популярний шрифт. Verdana легко читається навіть при невеликому розмірі шрифту.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Helvetica (sans-serif)
Шрифт Helvetica дуже подобається дизайнерам. Підходить для багатьох видів бізнесу.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Tahoma (sans-serif)
В шрифті Tahoma менше місця між символами.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Trebuchet MS (sans-serif)
Trebuchet MS було розроблено Microsoft в 1996 році. Використовуйте цей шрифт обережно. Підтримується не всіма мобільними операційними системами.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Times New Roman (serif)
Times New Roman - один із найбільш впізнаваних шрифтів в світі. Він виглядає професійно та використовується в багатьох газетах і "новостійних" вебсайтах. Це також основний шрифт для пристроїв і додатків Windows.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Georgia (serif)
Georgia - елегантний шрифт із засічками. Він добре читається при різних розмірах шрифту, тому є гарним кандидатом для адаптивного дизайну мобільних пристроїв.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Garamond (serif)
Garamond - класичний шрифт, що використовується в багатьох друкованих книгах. У нього позачасовий вигляд і добра читабельність.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Courier New (monospace)
Courier New - найбільш широко використовуваний моноширинний шрифт із засічками. Courier New часто використовується для кодування дисплеїв, і багато постачальників послуг електронної пошти використовують його як шрифт за замовчуванням. Courier New також є стандартним шрифтом для screenplays.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Brush Script MT (cursive)
Шрифт Brush Script MT було розроблено для імітації почерку. Він елегантний та вишуканий, але його важко читати. Використовуйте його обережно.
Приклад
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
Вітаємо вас! Ми з України!
0 1 2 3 4 5 6 7 8 9
Спробуйте самі »
Порада: Також перевірте всі доступні Google шрифти і способи їх використання.