Анықтама орталығы

Қаріпті сыртқы CSS файлы арқылы қосу әдісі

Файлдарды туған CSS арқылы қосу файлды сақтау үшін CSS кодын және өз серверіңізді жазу тәжірибесін талап етеді.

Ең алдымен WOFF пішіміндегі қаріп файлдары қажет
Оларды қаріп сатып алу арқылы алуға болады, мысалы, myfonts.com. Сатып алу кезінде интернетте пайдалану үшін «WEB» лицензиясын таңдаңыз.

Қаріп файлдарын Интернетке орналастыру
Файлдарды орналастыру үшін кез келген серверді немесе CDN қызметін таңдауға болады. Ең бастысы, сервер кез келген домен үшін себетін Access-Control-Revoluce-Origin CORS-ті қолдайды. (Access-Control-Origin: *)

Егер файлдарды серверде орналастырсаңыз
Сайттың түбірінде .htaccess файлын жасап, мына кодты жазыңыз:

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

CSS файлын жасап, оны серверде немесе CDN қызметінде орналастырыңыз.

CSS файлын жасау әдісі

Төменде CSS жазу әдісінің мысалы берілген. Оны тұрақты мәтін өңдегішінде жазып, кеңейтілген .css сақтап, серверге немесе CDN-ге кері жүктеуге болады.

@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 жазу мәліметтері

Цифры 300,400... в свойстве font-weight означают насыщенность начертания шрифта. Вот полный список:
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold

Браузеры в интернете рендерят шрифт немного по-другому, чем он может выглядеть, скажем, в фотошопе. Обычно получается чуть жирнее. Иногда полезно знать о небольшой хитрости: можно указать, например, файл Light начертания для normal.

@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}

И наоборот. Если у вас нет файла с начертанием semi-bold (600). То укажите вместо него файл Bold. Таким образом полужирные заголовки будут отображаться не базовым начертанием для текста, а жирным.

@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}

Если файл шрифта у вас всего один, то можете указать его вообще для всех начертаний, перечислив их через запятую: 300,400,500,600,700

Тильдаға оралу. Сайт параметрлері → қаріптер мен түстер CSS файлы → қаріпті кері жүктеу →. CSS файлына сілтеме (қаріптер емес). Қаріп атауын CSS файлында көрсетілгендей жазыңыз.

Барлық беттерді сақтап, қайта жариялаңыз.

Маңыздысы: шрифтіңізді жобаны жариялағанда ғана көресіз. Бетті өңдеу және алдын ала қарау режимінде сыртқы CSS файлы кірмейді, демек қаріп көрінбейді (бұл қауіпсіздік үшін жасалады).

Қаріп қосылымының қателері мен шешімдері