Fontik

CSS арқылы веб-сайтта қаріпті қалай қолдану керек

Қаріпті өз сайтыңызда көрсету үшін WOFF2 файлдарын серверге орналастырып, CSS-те @font-face арқылы жариялаңыз. Келушілерге ештеңе орнатудың қажеті жоқ.

Жаңартылған:

Қадамдар

  1. WOFF2 файлдарын қолданыңыз: олар жеңіл және барлық қазіргі браузерлерде жұмыс істейді. Қаріп бетінен жүктеуге болатын веб-жинақта WOFF2 файлдары мен дайын CSS бар.
  2. Қаріп файлдарын өз серверіңізге, мысалы /fonts/ қалтасына орналастырыңыз.
  3. Қаріпті CSS-те @font-face арқылы жариялаңыз: @font-face { font-family: "My Font"; src: url("/fonts/my-font.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  4. Оны стильдеріңізде қолданыңыз және әрқашан резервтік қаріптерді көрсетіңіз: body { font-family: "My Font", system-ui, sans-serif; }
  5. font-display: swap мәтінді бірден резервтік қаріппен көрсетеді де, қаріпіңіз жүктелгенде оны ауыстырады.
  6. Айнымалы қаріп үшін бір файлды қолданып, @font-face ішінде қалыңдық ауқымын көрсетіңіз, мысалы font-weight: 100 900.

Кеңестер

  • Негізгі файлды беттің head бөлігіне қосылған мына тегпен алдын ала жүктеңіз: <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/my-font.woff2">
  • Тек шынымен қолданатын қалыңдықтарды ғана қалдырыңыз.
  • Файлдарды бетпен бір доменнен беріңіз, ал олар басқа доменде болса, CORS тақырыптарын жіберіңіз.
  • Лицензия веб-сайтта қолдануға рұқсат беретінін тексеріңіз: ашық лицензиялы тегін қаріптерге әдетте рұқсат етіледі.

Сұрақтар

Сайтқа қандай файлдар керек?

WOFF2 файлдары. Олар жеңіл әрі барлық қазіргі браузерлерде жұмыс істейді; қаріп бетіндегі веб-жинақта олар дайын CSS-пен бірге беріледі.

Келушілер қаріпті орнатуы керек пе?

Жоқ: бет қаріпті сұраған кезде браузер оны сіздің серверіңізден өзі жүктейді.

Қаріпті коммерциялық жобада қолдануға бола ма?

Бұл қаріптің лицензиясына байланысты. Оны каталогтағы қаріп бетінен оқыңыз.

Басқа нұсқаулықтар