Paggamit ng Pasadyang Mga Font sa Mga Pahina sa Web
Ang nilalaman ng teksto ay palaging isang mahalagang piraso ng mga website, ngunit sa mga unang araw ng Web, ang mga designer at developer ay malubhang limitado sa tipograpikong kontrol na mayroon sila sa kanilang mga webpage. Kasama dito ang isang limitasyon sa mga font na magagamit nilang mapagkakatiwalaan sa kanilang mga site. Malamang na narinig mo ang salitang "web safe font" na nabanggit sa nakaraan. Tinutukoy nito ang maliit na hanay ng mga font na malamang na maisasama sa computer ng isang tao, ibig sabihin na kung ginamit ng site ang isa sa mga font na iyon, ito ay isang ligtas na taya na maisasalin nang tama sa browser ng isang tao.
Ngayon, ang mga propesyonal sa web ay mayroong maraming mga bagong font at uri ng mga opsyon upang magtrabaho kasama ang isa sa mga ito ay ang WOFF na format.
Ano ang WOFF?
Ang WOFF ay isang acronym na tumutukoy sa "Format ng Web Buksan ang Font." Ito ay ginagamit upang i-compress ang mga font para gamitin sa CSS @ font-face property. Ito ay isang paraan upang i-embed ang mga font sa mga pahina ng web upang maaari mong gamitin ang mga pinasadyang mga font na lampas sa karaniwang "Arial, Times New Roman, Georgia" - na ilan sa mga nabanggit na ligtas na mga font sa web.
Ang WOFF ay isinumite sa W3C bilang isang pamantayan para sa mga font ng packaging para sa mga web page. Ito ay naging isang nagtatrabaho draft noong Nobyembre 16, 2010. Ngayon kami ay may WOFF 2.0, na nagpapabuti sa compression mula sa unang bersyon ng format sa pamamagitan ng halos 30%. Sa ilang mga kaso, ang mga pagtitipid ay maaaring maging mas matibay!
Bakit Gamitin ang WOFF?
Ang mga font ng web, kabilang ang mga naihatid sa pamamagitan ng WOFF na format, ay nagbibigay ng maraming pakinabang sa iba pang mga pagpipilian sa font. Tulad ng kapaki-pakinabang sa mga ligtas na font ng mga web na iyon, at mayroon pa ring lugar para sa mga font na nasa aming trabaho, maganda din na palawakin ang aming mga pagpipilian at buksan ang aming mga opsyon sa pag-type.
Ang mga font ng WOFF ay may mga sumusunod na benepisyo:
- Mas madaling ma-access ang mga ito kaysa mga font bilang mga imahe. Ang mga estilo ng WOFF ay plain HTML na teksto na may CSS, na nagbibigay sa iyo ng access sa pagkontrol at disenyo na hindi hahayaan ng mga larawan.
- Kasama sa mga file ng WOFF ang impormasyong typographical gaya ng mga kontekstwal na anyo at mga lumang estilo ng figure. Nagbibigay ito ng mas mahusay na palalimbagan sa iyong mga web page dahil ginagamit mo ang tamang mga character, hindi lamang mga pagtatantya.
- Ang WOFF font ay makakatulong sa internationalization dahil maaari mong i-embed ang mga font na may mga character mula sa iba pang mga wika.
- Tulad ng lahat ng teksto ng istilong CSS, ang mga font na naka-istilong may WOFF ay mas maraming search engine friendly. Ang mga search engine ay hindi "nakikita" ang teksto na naka-embed sa isang imahe, at habang ang ALT text ay makakatulong, walang kapalit ng teksto mismo.
- Ang mga font ng WOFF ay naka-compress, kaya mas maliit ito sa iba pang mga uri ng mga file ng font. Makakatulong ito sa bilis ng pag-download ng site at pangkalahatang pagganap.
- Maaari mong gamitin ang WOFF file upang mapanatili ang iyong pagkakakilanlan ng tatak sa pamamagitan ng pag-embed ng iyong mga font ng korporasyon bilang mga file ng WOFF.
Suporta sa WOFF Browser
Ang WOFF ay may mahusay na suporta sa browser sa mga modernong browser, kabilang ang:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Ito ay mahalagang suportado sa buong board sa mga araw na ito, na may iisang pagbubukod ay ang lahat ng mga bersyon ng Opera Mini.
Paano Gamitin ang WOFF Mga Font
Upang magamit ang WOFF file, kailangan mong mag-upload ng WOFF file sa iyong web server, bigyan ito ng pangalan na may @ font-face property, at pagkatapos ay tawagan ang font sa iyong CSS. Halimbawa:
- I-upload ang font na tinatawag na myWoffFont.woff sa direktoryo ng / font ng web server.
- Sa iyong file na CSS magdagdag ng seksyon ng @ font-face:
@ font-face {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') na format ('woff');
}
- Idagdag ang bagong pangalan ng font (myWoffFont) sa iyong CSS font stack, tulad ng gagawin mo anumang iba pang pangalan ng font:
p {
font-family: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
Kung saan makakakuha ng WOFF Font
Mayroong dalawang magagandang lugar na maaari mong mahanap ang maraming mga font WOFF na libre para sa komersyal at hindi komersyal na paggamit:
- Buksan ang Font Library
- Font Squirrel
Kung mayroon kang lisensya na gumamit ng isang font na hindi magagamit sa isang format na WOFF, maaari mong gamitin ang isang taga-gawa ng WOFF tulad ng sa Font Squirrel upang i-convert ang iyong mga file ng font sa WOFF file. Mayroon ding command-line tool na tinatawag na sfnt2woff na magagamit mo sa Macintosh at Windows upang i-convert ang iyong mga font ng TrueType / OpenType sa WOFF.
I-download ang binary na naaangkop sa iyong system at patakbuhin ito sa command line (o Terminal) at sundin ang mga tagubilin.
WOFF Halimbawa
Narito ang ilang halimbawa ng mga file na WOFF: WOFF Page sa HTML5 sa loob ng 24 na Oras.
Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 7/11/17