Синтеза фонтова - ЦСС-трикови

Anonim

font-systhesisИмовина у ЦСС-у даје инструкције претраживача како да се рукује фонта подвуцени и Курзив карактер када је наведено font-familyих не укључује.

Узмимо за пример Лато из Гоогле фонтова. Каже да постоји 10 различитих варијација фонта.

Свака од тих варијација фонта је технички другачија датотека фонта. Ако желимо да користимо одређене тежине и стилове, повезали бисмо те датотеке како би прегледач имао шта да учита.

За ову реченицу обично би биле потребне четири различите датотеке с фонтовима.

Али, не укључују сви фонтови датотеке за руковање тежином и стилом. У тим случајевима прегледач ће „синтетизовати“ сам изглед. Претраживач чини најбоље што може, али погрешно подебљавање и стил понекад чине текст мање читљивим; односно мање читљива од заиста дизајниране верзије. У најблажим случајевима можемо видети да се знакови преклапају. У тежим случајевима, текст је потпуно нечитљив или чак може променити значење - као што би се могло догодити са језицима попут кинеског, јапанског, корејског и других логографских писама.

Ту се font-synthesisдолази. Он контролише које фонтове прегледач сме да синтетише.

Синтакса

.element ( font-synthesis: none | ( weight || style ); )

Једноставно, ово значи font-synthesisда прихватате:

  • вредност од none
  • било weightилиstyle
  • обоје weightиstyle

Вреди напоменути да font-synthesisсе сматра стенографским својством. Према спецификацији, то је комбинација font-synthesis-weightи font-synthesis-styleгде обе прихватају вредности autoили none. Будући да је могуће добити исти ефекат помоћу стенографије, то је вероватно најбољи начин.

Вредности

  • none: Не сме се синтетизовати ни подебљано ни косо
  • weight: Прегледач може синтетизовати подебљано
  • style: Прегледач може синтетизовати косо
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Употреба

font-synthesisможе се користити са свим елементима, укључујући ::first-letterи ::first-lineпсеудо-елементе.

Можда постоје случајеви када не дозвољавање прегледачу да синтетише подебљано и косо на целом језику има смисла јер било који од њих може прикрити знакове. Ево примера извученог из спецификације који онемогућава синтетизована подебљана и коса лица фонта која садрже арапске знакове:

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Демо

Подршка прегледача

У време писања овог извештаја, цаниусе извештава о укупном покривености font-synthesisимовине за 20,21% .

Десктоп

ИЕ Ивица Фирефок Хром Сафари Опера
Не Не 34+ Не 9+ Не

Мобиле

иОС Сафари опера мини Андроид претраживач Цхроме за Андроид Фирефок за Андроид
9+ Све Не Не 68

Желите да користите font-synthesisу е-пошти? Цампаигн Монитор извештава да га подржавају следећи клијенти:

  • Аппле Маил 10+
  • Оутлоок за Мац
  • АОЛ Алто иОС апликација
  • иОС Маил 10+
  • врабац
  • Г Суите
  • Гмаил
  • Гоогле Инбок

Више информација

  • Спецификација модула ЦСС фонтова нивоа 4
  • „ЦСС3 тест: font-synthesis“ Ериц Меиер
  • „Како курзивирати текст“ Цхриса Цоииера