Сайтқа ерекше қаріптер орнату
Кейде болады, дизайнер Сізге фотошоппен дизайнды лақтыра салады. Ашасыз. О, керемет! Әдемі қаріппен текст жазулы тұр. Хммм… Бұндай қаріптер басқа көп сайтта кездеспейді. Енді ше. Қарапайы HTML кодпен сипаттай өтесіз. Сақтап, ашасыз. Тамаша!
Тексеріп, басқа комптан ашсаңыз, ...ұжс! Бағанағы әдемі әріптеріңіз жоқ! Орнына сүйкімсіз таймс нью роман шұбырып жатыр. Қап!
Браузер қаріпті c:\windows\fonts ішінен алып отырған екен. Басқа компьютерде ол қаріп жоқ болса, солай қате шығады ғой.
Жалпы, қаріптер десктоп (комп үшін) және веб үшін деп қарастырылатынын есте ұстаңыз.
Бұлай болғанда, қаріпті серверге салып қою керек қой. Осы жағдайды шешудің үш жолын ұсынамын:
1. ttf.in.ua/ сайтынан өзіңізге қажет қаріпті тауып алыңыз. Бұл жерде түсінікті, комп және веб үшін деп ұсынады.
2. Font-Face Generator. Яғни, комптағы қаріпті веб үшін арнайы генерациялап, тіпті css кодына дейін әзірлеп береді. Мысалы:
3. Айналайын, гугл! google.com/fonts
Осының ішінен тікелей кириллицаны таңдап, қаріпті таңдай саласыз.
Ұсынылған қаріп сілемесін head тегтерінің ортасына жариялап, мысалы:
кейін қаріп атауын css стильге жаза саласыз.
Мысалын мына сайттан көрсеңіз болады: surprise-me.kz/3/
Тексеріп, басқа комптан ашсаңыз, ...ұжс! Бағанағы әдемі әріптеріңіз жоқ! Орнына сүйкімсіз таймс нью роман шұбырып жатыр. Қап!
Браузер қаріпті c:\windows\fonts ішінен алып отырған екен. Басқа компьютерде ол қаріп жоқ болса, солай қате шығады ғой.
Жалпы, қаріптер десктоп (комп үшін) және веб үшін деп қарастырылатынын есте ұстаңыз.
Бұлай болғанда, қаріпті серверге салып қою керек қой. Осы жағдайды шешудің үш жолын ұсынамын:
1. ttf.in.ua/ сайтынан өзіңізге қажет қаріпті тауып алыңыз. Бұл жерде түсінікті, комп және веб үшін деп ұсынады.
2. Font-Face Generator. Яғни, комптағы қаріпті веб үшін арнайы генерациялап, тіпті css кодына дейін әзірлеп береді. Мысалы:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
3. Айналайын, гугл! google.com/fonts
Осының ішінен тікелей кириллицаны таңдап, қаріпті таңдай саласыз.
Ұсынылған қаріп сілемесін head тегтерінің ортасына жариялап, мысалы:
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
кейін қаріп атауын css стильге жаза саласыз.
Мысалын мына сайттан көрсеңіз болады: surprise-me.kz/3/
-
+2
Ондай сайттар тіптен жоқ деп айтуға болады.
Жарнамалық, промо сайттар осындай ерекше қаріпті қажет ететіні белгілі. Себебі, түрлі әдемілік пен дизайн маңызды. Енді, оған контенттік жобаны қоспауды ұсынамын. XD
Мысалыға, мына қаріптер:
fontawesome.io/
www.justbenicestudio.com/studio/websymbolsliga/