Nn s dng Cufont hay Font face

Lu lu lt web bn li bt gp nhng website c thit k bng nhng font ch n tng m khng dng hnh nh. Lm th no c th s dng cc font ch ty trnh trn website ca mnh m khng cn phi quan tm pha ngi dng c font ch hay khng. gii quyt vn ny c rt nhiu plugin ra i gii quyt, l: Cufont, Font face, sFIR (Scalable Inman Flash Replacement) . Nhng do sFIR bt buc ngi dng phi ci Flash nn y ti khng ni ti. Cufont v Font Face l g v c nn dng khng?

Cufont
Cufont s dng JavaScript render font vi Canvas hoc VML khi trnh duyt c load xong. Do vy khi s dng Cufon chng ta c th chy c hu ht cc trnh duyt ph bin hin nay.
Cch s dng (Click)

u im

Nhanh X l font chy trn client D s dng S dng javascript nn tng thch hu ht vi cc trnh duyt Khng nh hng n SEO Cht lng font khng b gim

Nhc im

Khng hot ng nu javascript b disable Khng th select text c Khi javscript cha load xong th l font mc nh

Font Face
Font face s dng khai bo css hot ng, nhng kh ch mi trnh duyt li h tr khc nhau nn tnh tng thch khng cao
Cch thc s dng (Click)

Uu im

Ch cn khai bo, khng cn n javascript C th chn text v t Khng nh hng ti seo

Nhc im

Cht lng font ph thuc vo trnh duyt Trong khi font download font bn ch thy font mc nh C th my client c font ri nhng trnh duyt vn thc hin down li

Tng kt
Cufont hay font face u c u nhc im ring cu mnh. Nhng theo kin ch quan ca mnh th mnh s chn Cufont. Ngoi nhc im khng th chn text ra th Cufont c rt nhiu u im nh: Font p, tng thch cao, my gi mnh th javascript chy v t @@ Chc bn chn c cch thch hp t p thm cho website ca mnh

http://www.echip.com.vn/echiproot/weblh/suutam/2000/pcworld/699/nfvtw/nfvtw.htm

Khng c g chc chn l trang Web ca chng ta s c din mo ng nh thit k khi n hin th trn mn hnh ca c gi. Tt c cn ty thuc vo trnh duyt v s h tr font trn my ngi c. Nu khng tnh n cc th hin c dng ngn ng Javascript hay bscript, ngi ta quan tm n vic cc font ch dng trong trang Web c c ci sn trn my khch hay khng. Tc gi trang Web phi chn la hoc l ch dng cc font ch i km vi h iu hnh, hoc l chp nhn trang Web s c th hin khc nhau trn tng my. Do c nhiu b m ting Vit khc nhau, vic la chn font ch cho trang Web sao cho a s ngi c u xem c ting Vit l yu cu hng u, k tip l trang Web phi th hin c chnh xc nh thit k. Hin nay cc trang Web ting Vit hoc dng b font m VNI (VNI-Times), TCVN (.vnTime) hoc b font c to ring (nh Phng Nam). Thng thng, trn cc trang ny u c la chn ngi c ti font v ci t trn my mnh.

Trc nhng yu cu thc t , k thut nhng font vo trang Web sao cho ngi khng c sn font vn c c ang l k thut c c Internet Explorer v Netscape pht trin. Trong bi ny chng ti trnh by v k thut nhng font (Embedded Font Technology) c h tr bi IE 4.x tr i. K thut nhng font vo trang Web Hin nay cha c tiu chun cng nghip cho k thut nhng font. K thut nhng font ca Microsoft ch c h tr bi Internet Explorer 4.0 tr i. K thut nhng font ca Microsoft dng CSS (Cascading Style Sheet) ch nh kiu font cho trang Web. Trnh duyt Internet Explorer s tm thi ci t font ch vo h thng ca ngi c bo m trang Web c hin th chnh xc nh khi thit k. Cc font ch c th khng c ti v my ca c gi nu chng c ci sn . Th d sau y cho thy cch ch nh bng ngn ng CSS: <style TYPE= "text/css"> <!? @font-face { font-family: VNI-Times; font-style: normal; font-weight: normal; src: url(vniTimen.eot); } ?> </style>

Cc mc nhng font Trong m font True Type ghi sn v vic c c php dng cc cng c chuyn i n ra dng font nhng hay khng. C 4 mc cho php: * No-embedding: c ch nh trong mt b phn nh cc font hin c. Tc gi ca cc font ny khng cho php nhng. Mt s cho php nng cp ln cc phin bn nhng c.

Cc font Bch Khoa 1 byte v 2 byte thuc loi ny (bn c L Hon sa cha bng Fontographer). * Print and preview: font c th c nhng, nhng ch trong cc trang tnh. Nu vic tng tc vi ngi dng c th dn n s thay i font trn trang, th phi dng font "editable" hay "installable". Tt c font VNI u thuc dng ny. * Editable: font c th c nhng bng cch dng cc cng c nh WEFT (Web Embedding Fonts Tool) m khng chu nhng hn ch nh cc font "print and preview". * Installable: c xem nh font "editable" trong trnh duyt Internet Explorer 4.0. Font "Installable" s khng c ci t trong th mc font ca my khch. Nguyn nhn chnh ca vic ra nguyn tc ny l trong qu trnh ngi dng lt trn Web, th mc font ca h c th nhanh chng cha y hng trm font m h khng mun hay khng cn. Cc font ABC (1 byte) thuc dng ny. To font nhng vo trang Web bng cng c Microsoft WEFT C mt s cng c to font nhng vo trang Web, nh Hexmac Typograph 2.0 hoc Webfont Maker to cc file *.PFR dng cho c IE ln Netscape, Microsoft WEFT to font i tng *.eot ch dng cho IE 4.x tr ln. Tuy nhin, ch c Microsoft WEFT l min ph.

Th d sau y minh ha cch s dng cng c Microsoft WEFT to font eot. C th ti phin bn mi nht ca cng c ny t Web site Microsoft Typography

(http://www.microsoft.com/opentype/Web/embedding/weft2/default.htm). Trong bi ny chng ti dng WEFT phin bn 2.0. Cc i tng font c to bi WEFT khng ging vi font truyn thng mt s im: Chng l mt tp con ch gm cc mu k t c xut hin trn mt site hay mt trang c bit; Chng dng nn v ch c ci t bi Internet Explorer 4.x sao cho cc ng dng khc khng th truy cp; Chng cng khng th lin kt bi cc site khng c php s dng chng. chun b cho th d to font bng WEFT, hy to mt th mc TEST trn a C v to trang Web c cc dng sau y. Lu file vo th mc C:\TEST vi tn l fonts.htm. <html> <head> <title>test page</title> </head> <body> <font face=VNI-Times size=2> <p><b>VNI-Times</b> VNI 2 byte [ ] </font> <font face=.vnTime size=2> <p><b>.vnTime</b> Tiu chun Vit Nam 3 [] </font> <font face=vnTimes size=2> <p><b>vnTimes</b> Bch Khoa HCM 1 byte [] </font> </body> </html> Cc dng ch Vit sau khi khai bo font c g theo bng m tng ng vi font. Trn my c ci font, IE hin th nh sau:

Khi ng WEFT. Nu y l ln khi ng u tin, WEFT s yu cu nhp tn v a ch email. Tn v a ch ny dng ch thch trong phn style u trang Web v tc gi ca font i tng s c to.

Microsoft WEFT hng dn chng ta to font eot tun t qua cc bc: 1. Chn trang Web. 2. Phn tch trang. 3. Chn font v b k t. 4. To font. M n mi bng lnh: File.New 1. Hp thoi Add Web Pages hin ra. Qua hp thoi ny, chng ta c th chn danh sch cc trang Web cn c nhng font, cc trang ny c th t a cng hay trn mt Web site no . File trn a cng c a ch bt u l file:// File trn Web site c a ch bt u l http://, https:// hay ftp://.

Ch l ch dng hai du "/" thay v ba du. C th g a ch trang Web trc tip vo text box hay bm nt "..." (nh du trn hnh bng 1) chn. Sau bm nt "Add" (nh du trn hnh bng 2) a vo danh sch chn. Nu khng nh du chn 3 "Do not add linked pages" th cc trang lin kt bng href vi trang ang chn u c t ng a vo. Nt Exclude dng b chn mt trang trong danh sch chn. Trong th d ny, g file://C:\test\ v bm nt "Add". Bm "Next". 2. Hp thoi Analyze Web Pages hin ra. Bm "Analyze pages!"

MS WEFT phn tch s k t trn mi font c dng trong cc trang Web. MS WEFT to font nhng ch gm cc mu k t xut hin trn trang Web, tnh ring cho cc kiu thng, m hay nghing. Thi gian phn tch c th rt lu ty theo tc CPU, s trang Web v di cc trang. Bm "Next". 3. Hp thoi Fonts to Embed hin ra. y l hp thoi quan trng nht trong qu trnh to font. Danh sch cc font c dng trong trang Web c lit k y. ct Info cn ch r mc cho php nhng font ca tng tn font. Qua th d ny, ta nhn thy font ABC (nh du trn hnh bng 1) thuc loi "Installable", font VNI (2) thuc loi "Previewable" v font Bch Khoa HCM (3) thuc loi "No Embedding". Nh vy v nguyn tc, khng th dng font Bch Khoa to font nhng vo trang Web. Ta c th loi b font ra khi danh sch kho st bng cch chn n v bm nt "Dont embed". Bm "Add" chn thm font vo danh sch kho st cho d font khng c dng trong cc trang Web. C th thm bt mu k t trong font eot bng cch chn tn font v bm "Subset ...". Khi mt bng cc mu k t c WEFT chn hin ra trong ca s "Used

characters" 1 v di dng chui k t trong text box "Current subset" 2. C ba cch thay i s k t trong b font: * Nhp chut ln mu k t trong ca s "Used characters" 1 chn (k t c chn c mu en) hay loi b n (c mu xm). * G thm, xa, ct v dn trong text box "Current subset" 2. * Np mt file text dng ASCII hay Unicode ch nh tp k t cho b font bng nt "Load ..." 3. Nu ta loi b mt mu k t c dng trn trang Web th s xut hin vung (ti v tr cc k t ). Nu ta chn thm mt mu k t khng c dng trn trang Web, file font eot s c kch thc ln ra mt cch v ch. Ch l file eot cng ln, vic ti font v my ngi dng cng chm. Mt khc, cc font ting Vit 2 byte lun cho font eot c kch thc nh hn font 1 byte v s dng t k t hn. B li, trang Web dng font ting Vit 1 byte s c kch thc nh hn trang tng t dng font 2 byte.

Hp danh sch "Subsetting" cho php chn cch to font eot. C by cch c WEFT h tr: * 'Per Page' Subsetting Vic phn tch font t trn c s trang. Vi mi trang, i tng font c to cho tng font. Mi i tng font ch cha cc k t c dng trong mt trang c bit v ch lin kt vi trang thi.

* 'Per Site' Subsetting Phn tch trn tt c trang thuc Web site trn c s font c dng. Ch mt i tng font c to cho mi font ch. i tng ny bao gm tt c k t c dng bi mt trong cc trang c dng font .

* Family based Subsetting (default) S mu k t tnh gp t cc font thuc cng h. Th d trn trang c dng ch a, b font VNI-Times thng v c dng ch b, c font VNI-Times m th font eot ch thng hay ch m u c 3 mu k t a, b v c. Cch to font ny phi c chn cho cc trang Web ng, ni cc script c th thay i kiu k t. Th d, lin kt duyt hin di dng ch m trong khi lin kt cha duyt hin di dng ch thng. * 'Union' Subsetting B k t cho mi font c su tp t tt c cc trang bt chp font c dng. Cc i tng font c to cha cng mt b k t. Th d a, b v c c font VNI-Times, c v d font VNI-Helve th cc i tng font tng ng u cha a, b, c v d. Cch ny thng c dng cho nhng trang HTML phc tp, ni c ch nh style nhng font thay i ty tnh hung.

* 'Raw' Subsetting Tng t nh "union subsetting", nhng tnh c nhng k t dng trong cc script hay ch thch cng nh cc k t hin ra trong ca s trnh duyt khi trang c np. * 'Language' subsetting Font i tng to trn c s ngn ng c dng thay v thng k cc k t c dng. C th chn bt k trong 96 Unicode code point ranges c t bi ISO 10646. * No subsetting Font i tng s cha tt c k t trong mi font c dng. Khi chn mt trong cc cch to font trn, ta c th thy ngay ct Chars s k t trn tng font thay i.

Bm "Next". 4. Hp thoi Create Font Objects hin ra. Hp thoi ny dng ch nh font eot to ra s c t u v dng cho nhng th mc hay Web site no. Text box u tin (nh du trn hnh bng 1) dng nhp a ch t font eot s c to. a ch ny nn l a cng, bt u bng file://, v qu trnh to font rt lu v ta c th upload ln Web site sau. C th g trc tip tn th mc hay bm nt "..." tm trn a.

Text box th hai (nh du trn hnh bng 2) dng ch nh tn th mc hay Web site c php dng cc font eot ny. Nu ta ch nh y tn th mc C:\ nhng sau dng cho trang Web t th mc C:\TEST th Internet Explorer s khng ci t font. Tng t nh vy vi cc Web site. Ngoi ra, cc trang Web c dng font eot v cc file font tng ng phi nm cng ch, hoc cc file font nm th mc con thuc cng mt Web site. Nhng hn ch ny cng c cc trnh to font khc, c Microsoft gii thch l cho cc Web site khc khng th dng chung font mt cch bt hp php. to b font ch Vit dng cho mi trang Web (tt nhin thuc cng th mc hay cng a ch Web site), hp thoi Fonts to Embed, bm nt "Subset ..." v chn tt c cc mu k t ting Vit cho d chng khng c dng trn trang Web ang phn tch. Ti giai on 4 ny, chng ta ch nh tt c cc a ch d nh dng b font ny. C th g trc tip cc a ch vo text box th hai. a ch trn a bt u bng file://. a ch trn Web site bt u bng http://, https:// hay ftp:// ty theo a ch thc t ca Web site. Cc a ch t cch nhau bng du ";". Th d: file://c:\test;http://membres.tripod.fr/tedis/. C th bm vo nt "Mirror site ..." chn a ch trn a hay t Internet (nu ang trc tuyn).

Nu nh du chn hp kim tra Show CSS@font-family declarations (nh du trn hnh bng 3) th sau khi to font, MS WEFT s hin th hp thoi trnh by mu CSS dng nhng font vo trang Web. Cui cng bm ln nt Create Fonts v ch i. Cc file font eot s c to v t ng vo ni qui nh. Thng thng MS WEFT s chn thm cc dng CSS vo bn sao ca cc trang Web ang phn tch v t chng th mc WebFontProjects trong My Documents. <style TYPE="text/css">

<!? $WEFT ? Created by: Your Name (accountname@yourisp) on 5/3/99 ? @font-face { font-family: VNI-Times; font-style: normal; font-weight: 700; src: url(file:///C|/TEST/VNITIME1.eot); } @font-face { font-family: VNI-Times; font-style: normal; font-weight: normal; src: url(file:///C|/TEST/VNITIME0.eot); } @font-face { font-family: Tahoma; font-style: normal; font-weight: 700; src: url(file:///C|/TEST/VNTIME1.eot); } @font-face { font-family: .vnTime; font-style: normal; font-weight: normal; src: url(file:///C|/TEST/VNTIME0.eot); } ?> </style> Kim tra t thm mt k t x trc tn font, thuc dng font-family trong khai bo style hay trn dng "<font face=" trong phn <body>. Nh vy trang Web ca chng ta s dng font xVNI-Times, x.vnTime khng c trong h thng, buc IE s dng font i tng

va c to. Lu file v nhn p ln tn file. Nu nhn thy c ch Vit l thnh cng. Ch l cc font i tng ca Bch Khoa khng to c. Ni dung trang Web sa i nh sau: <html> <head> <title>test page</title> <style TYPE="text/css"> <!? $WEFT ? Created by: Your Name (accountname@yourisp) on 5/3/99 ? @font-face { font-family: xVNI-Times; font-style: normal; font-weight: 700; src: url(file:///C|/TEST/VNITIME1.eot); } @font-face { font-family: xVNI-Times; font-style: normal; font-weight: normal; src: url(file:///C|/TEST/VNITIME0.eot); } @font-face { font-family: xTahoma; font-style: normal; font-weight: 700; src: url(file:///C|/TEST/VNTIME1.eot); } @font-face { font-family: x.vnTime; font-style: normal; font-weight: normal; src: url(file:///C|/TEST/VNTIME0.eot); }

?> </style> </head> <body> <font face=xVNI-Times size=2> <p><b>VNI-Times</b> VNI 2 byte [] </font> <font face=x.vnTime size=2> <p><b>.vnTime</b> Tiu chun Vit Nam 3 [] </font> <font face=xvnTimes size=2> <p><b>vnTimes</b> Bch Khoa HCM 1 byte [] </font> </body> </html> Ti ln Web site dng font i tng va to, chng ta phi ti chng ln Web site v t cng th mc vi trang Web hoc th mc cp con. ng dn trong khai bo style cng thay i cho ph hp. Mt khc, chng ta c th i tn cc file font tin tham chiu. Th d: Font VNI-Times thng: vniTimen.eot Font VNI-Times m: vniTimeb.eot Font ABC-Times thng: abcTimen.eot Font ABC-Times m: abcTimeb.eot Ch l mc d qui tc t tn file 8 chm 3, khng cn tun th tn file hay th mc li cn ghi chnh xc ch hoa hay ch thng trnh rc ri do Web Server phn bit ch hoa v ch thng. Cc file font nn t th mc con fonts ca Web site. Khai bo style nh sau:

<style TYPE="text/css"> <!? $WEFT ? Created by: Your Name (accountname@yourisp) on 5/3/99 ? @font-face { font-family: VNI-Times; font-style: normal; font-weight: 700; src: url(fonts/vniTimeb.eot) } @font-face { font-family: VNI-Times; font-style: normal; font-weight: normal; src: url(fonts/vniTimen.eot) } @font-face { font-family: .vnTime; font-style: normal; font-weight: 700; src: url(fonts/abcTimeb.eot) } @font-face { font-family: .vnTime; font-style: normal; font-weight: normal; src: url(fonts/abcTimen.eot) } ?> </style> L Anh Tun