Анықтама орталығы
Қаріпті сыртқы CSS файлы арқылы қосу әдісі
Қаріптерді CSS арқылы қосу үшін сізге CSS кодымен жұмыс істеу тәжірибесі және файлдарды сақтау үшін өзіңіздің серверіңіз қажет.
Қаріпті дайындап, онлайн режимінде жариялаңыз
Қаріпті сатып алғаннан кейін файлдарды алуға болады, мысалы, myfonts.com сайтынан. Сатып алу кезінде WEB лицензиясын таңдаңыз — ол қаріпті веб-сайтыңызда пайдалануға жарамды. Әрі қарай, файлдарды өз серверіңізге немесе CDN қызметіне жүктеңіз. Сервердің кез келген доменге файлдарды ұсыну үшін CORS тақырыбын қолдауы маңызды: Access-Control-Allow-Origin: *
Егер сіз серверіңізде файлдарды орналастырсаңыз, веб-сайтыңыздың түбірлік файлында .htaccess файлын жасаңыз және CORS конфигурациялау үшін келесі кодты қосыңыз:
Егер сіз серверіңізде файлдарды орналастырсаңыз, веб-сайтыңыздың түбірлік файлында .htaccess файлын жасаңыз және CORS конфигурациялау үшін келесі кодты қосыңыз:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>CSS файлын жасаңыз
Бөлек CSS файлын жасап, оны серверіңізге немесе CDN қызметіңізге орналастырыңыз. Бұл файлда @font-face ережесін пайдаланып қаріптің қосылуын көрсетуіңіз керек.
Сіз CSS файлын кәдімгі мәтіндік редакторда жасай аласыз: кодты жазып, файлды .css кеңейтімімен сақтаңыз, содан кейін оны серверге немесе CDN-ге жүктеңіз. CSS кодын жазудың мысалы:
Сіз CSS файлын кәдімгі мәтіндік редакторда жасай аласыз: кодты жазып, файлды .css кеңейтімімен сақтаңыз, содан кейін оны серверге немесе CDN-ге жүктеңіз. CSS кодын жазудың мысалы:
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}CSS жазу ерекшеліктері
font-weight қасиетіндегі сандар қаріптің салмағын көрсетеді:
Браузерлер қаріптерді Photoshop сияқты графикалық редакторларға қарағанда сәл басқаша көрсете алады. Көбінесе, веб-сайтта қаріп сәл ауырлау болып көрінеді. Мұндай жағдайларда кәдімгі мәтін үшін жеңілірек салмақты, мысалы, қалыпты мән үшін Light файлын пайдалануға болады.
Егер сізде жартылай қалың қаріпі бар файл болмаса, оның орнына қалың файлды пайдаланып, қажетті қаріп қалыңдығының мәнін көрсете аласыз:
- 300 — жарық;
- 400 — қалыпты;
- 500 — орташа;
- 600 — жартылай қалың шрифтпен;
- 700 — қалың шрифтпен.
Браузерлер қаріптерді Photoshop сияқты графикалық редакторларға қарағанда сәл басқаша көрсете алады. Көбінесе, веб-сайтта қаріп сәл ауырлау болып көрінеді. Мұндай жағдайларда кәдімгі мәтін үшін жеңілірек салмақты, мысалы, қалыпты мән үшін Light файлын пайдалануға болады.
Егер сізде жартылай қалың қаріпі бар файл болмаса, оның орнына қалың файлды пайдаланып, қажетті қаріп қалыңдығының мәнін көрсете аласыз:
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 600; font-style: normal;
}Егер сізде тек бір қаріп файлы болса, оны бірден бірнеше қаріп стильдері үшін көрсете аласыз:
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Regular.woff')
format('woff');
font-weight: 300, 400, 500, 600, 700; font-style: normal;
}Tilda-ға CSS файлын қосыңыз
Tilda сайтына оралып, «Сайт параметрлері» → «Қаріптер» → «Қаріпті жүктеу» → «CSS файлы» бөліміне өтіңіз. Сілтемені қаріп файлдарына емес, CSS файлына қойыңыз. Содан кейін font-family қасиетінде қаріп атауын CSS файлында көрсетілгендей дәл көрсетіңіз.
Барлық беттерді сақтап, қайта жариялаңыз.
Маңызды: Сіздің реттелетін қаріпіңіз тек жобаңызды жариялағаннан кейін ғана пайда болады. Өңдеу және алдын ала қарау режимінде сыртқы CSS файлы қауіпсіздік мақсатында қосылмаған, сондықтан қаріп көрсетілмеуі мүмкін.
