Paggamit sa Custom Fonts sa mga Web Pages
Ang sulod sa teksto kanunay usa ka importante nga piraso sa mga website, apan sa unang mga adlaw sa Web, ang mga tigdisenyo ug mga tig-ugmad limitado kaayo sa pagkontrol sa typographic nga anaa sa ilang mga webpage. Naglakip kini sa limitasyon sa mga font nga mahimo nilang gamiton nga gamiton sa ilang mga site. Tingali nakadungog ka sa termino nga "web safe fonts" nga gihisgutan sa nangagi. Kini nagtumong sa gamay nga hugpong sa mga font nga lagmit nga gilakip sa computer sa usa ka tawo, nga nagpasabot nga kon ang site naggamit sa usa sa maong mga font, kini usa ka luwas nga pusta nga kini husto nga ibutang sa browser sa usa ka tawo.
Karon, ang mga propesyonal sa web adunay daghan nga mga bag-ong mga font ug mga klase nga mga kapilian nga magamit, ang usa niini mao ang WOFF format.
Unsa ang WOFF?
Ang WOFF usa ka acronym nga nagpasabut sa "Web Open Font Format." Gigamit kini sa pag-compress sa mga font aron magamit sa CSS @ font-face property. Kini usa ka paagi sa pag-embed sa mga font sa mga panid sa web aron imong magamit ang espesyal nga mga font nga anaa sa unahan sa tipikal nga "Arial, Times New Roman, Georgia" - nga pipila sa mga gihisgutan nga web safe nga mga font.
Ang WOFF gisumitir ngadto sa W3C isip usa ka sukaranan alang sa mga packaging font alang sa mga web page. Kini nahimo nga usa ka nagtrabaho draft sa Nobyembre 16, 2010. Karon kita sa tinuod adunay WOFF 2.0, nga pagpalambo sa compression gikan sa unang bersyon sa format sa dul-an sa 30%. Sa pipila ka mga kaso, kini nga mga tinipigan mahimo nga labi pa ka sulud!
Nganong Gamiton ang WOFF?
Ang mga web font, lakip ang gipadala pinaagi sa WOFF format, naghatag og daghan nga mga bentaha sa ubang mga pagpili sa font. Ingon nga mapuslanon sa mga maluwas nga mga font sa web, ug aduna gayuy dapit alang niadtong mga font sa atong trabaho, maayo usab nga mapalapad ang atong mga pagpili ug magbukas sa atong mga kapilian sa typography.
Ang WOFF fonts adunay mga mosunod nga mga benepisyo:
- Kini mas sayon kay sa mga font isip mga hulagway. Ang mga estilo sa WOFF yano nga HTML nga teksto uban sa CSS, nga naghatag kanimo ug kasayon ug pagkontrol sa disenyo nga dili tugotan sa mga hulagway.
- Ang mga file nga WOFF naglakip sa impormasyong tipograpiko sama sa mga porma sa konteksto ug mga estilo sa daan nga estilo Kini naghatag sa imong mga web page og mas maayo nga typography tungod kay ikaw naggamit sa husto nga mga karakter, dili mga pag-ihap lamang.
- Ang WOFF nga mga font makatabang sa internasyonalization tungod kay mahimo nimo nga ma-embed ang mga font nga adunay mga karakter gikan sa ubang mga pinulongan.
- Sama sa tanan nga CSS styled text, ang mga font nga gisulat sa WOFF mas daghan nga search engine nga mahigalaon. Ang mga search engine dili "makita" nga teksto nga gisudlan sa usa ka hulagway, ug samtang ang ALT text makatabang, walay kapuli ang teksto mismo.
- Ang mga font sa WOFF gipilit, mao nga kini mas gamay kay sa ubang mga tipo sa mga file sa font. Kini makatabang sa site speed download ug kinatibuk-ang performance.
- Mahimo nimong gamiton ang mga file sa WOFF aron mapreserba ang imong identity sa brand pinaagi sa pag-embedding sa imong corporate fonts ingon nga WOFF files.
Suporta sa WOFF Browser
Ang WOFF adunay maayong suporta sa browser sa modernong mga browser, lakip ang:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Gipaluyohan kini sa tibuuk nga board niining mga adlawa, uban sa bugtong eksepsiyon nga ang tanan nga mga bersyon sa Opera Mini.
Unsaon Paggamit ang WOFF Fonts
Aron makagamit sa WOFF file, kinahanglan ka mag-upload sa WOFF file sa imong web server, hatagi kini og ngalan nga may @ font-face property, ug dayon tawga ang font sa imong CSS. Pananglitan:
- I-upload ang font nga gitawag myWoffFont.woff sa direktoryo sa / fonts sa web server.
- Diha sa imong CSS file makadugang sa seksyon @ font-face:
@ font-face {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') format ('woff');
}
- Idugang ang bag-ong pangalan sa font (myWoffFont) sa imong CSS font stack, sama sa bisan unsang lain nga ngalan sa font:
p {
font-family: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
Kung asa makakuha og WOFF Fonts
Adunay duha ka dagkong mga dapit nga imong makita ang daghang mga font nga WOFF nga libre alang sa komersyal ug dili komersyal nga paggamit:
- Open Library Library
- Font Squirrel
Kung adunay lisensya nga gamiton ang usa ka font nga dili makuha sa WOFF format, mahimo nimo gamiton ang usa ka WOFF nga magbubuhat sama sa Font Squirrel sa pag-convert sa imong mga file sa font ngadto sa mga file sa WOFF. Adunay usab usa ka himan sa command-line nga gitawag sfnt2woff nga imong magamit sa Macintosh ug Windows aron ma-convert ang imong TrueType / OpenType fonts ngadto sa WOFF.
I-download ang binary nga angay sa imong sistema ug padaganon kini sa command line (o Terminal) ug sunda ang mga instruksyon.
WOFF Example
Ania ang pipila ka mga pananglitan sa mga file sa WOFF: WOFF Page on HTML5 sa 24 Oras.
Ang orihinal nga artikulo ni Jennifer Krynin. Gipamod ni Jeremy Girard sa 7/11/17