UnicodeAndFont Face

6
@Font @Font @Font @Font-Face Face Face Face CSS3 CSS3 CSS3 CSS3 1 | Page by Mhaw Sayar on January 17, 2011 (http://mbl0gger.net/2011/01/unicode-font-face-css3-and-browsers) MM3 & CSS3 ೊೊ ೊ Ê Ê ೊೊ Ê ೊÊ න Ê Ê Ê ÊÊೊ Ê ÊꜶÊ Ê ೊÊ ೊ Ê ÊꜶÊೊ ÊÊ ೊ Ê ೊÊ Ê ÊꜶÊೊ ÊꜶÊೊ ÊÊ Ê Ê Ê ೊÊೊ Ê ೊÊ Ê Ꜷ Ê ೊꜶ ÊÊ Ê Ê නÊ Ê ೊ ೊÊ ೊ ೊೊ ೊೊ ೊ Ê Ê Ê Êೊ – ೊ Êೊ ( Ê ೊÊ Ê ) sIFR - (Scalable Inman Flash Replacement) Ê Javascript ೊꜶ ೊÊ Ê - Cufon (CUstom FONts) Javascript ೊÊ ( sIFR න ೊ Ê Ê Ꜷ ) FLIR - PHP script ೊ Ê Ꜷ font-face ೊ ÊೊÊ ÊÊ Ê Ê Ꜷ ೊ Ê Êೊ ೊ(Font-face) Ê Êೊ Ê Ê Ê න ೊ Ê ೊೊÊ Ê ೊ loading ೊÊ Êೊ Ê Ê Bandwidth ÊꜶ Ê ೊ Content Ê Ê

Transcript of UnicodeAndFont Face

Page 1: UnicodeAndFont Face

�������������������������������� @Font@Font@Font@Font----FaceFaceFaceFace CSS3 CSS3 CSS3 CSS3 �������������������� �������� !�"�������� !�"�������� !�"�������� !�"

1 | P a g e

by Mhaw Sayar on January 17, 2011 (http://mbl0gger.net/2011/01/unicode-font-face-css3-and-browsers)

�=�>��"�=�>��"�=�>��"�=�>��"

MM3 & CSS3

@A �"BC�DE�� FG H���H� IH�B�J�K"J�K" L��I�����@M��= N �� � O��H� !����� !�"IP�� E�DE�� ���� � E�DE�� ���������=� LD�K" @N Q �R E��ST DE�UN H��H LV=�@> O��H� !�����L�" N �� �J=� ������HP� N ���=�����" N �� �J=� I=I=�!�! �@MU=�W L��"DE� O��V=��� U��I�"��"D�"D� !�" LIP����� UI�STD� !�" LIP��@> �X �" �"�D� H=���BM T IH��@� UN H�BC�DE�Y

LB��LBC !�"HP� L��� � LB! =QZL�" [@ �L��UN ��� \�I��TI�@N �J!�� N �� ���D� UN ��� O��V=�����"D�"D� IH�[�"L��UN ��� D�U��I�" E�� O��H� !�����IP�� LD�K" @N Q��� HKB! =�� �� �U���� L ! =Q"LH�" !�" ��P"B!��BP��� �E�"@>"BN ��" V=�DE��LB!��L�" [�"HP� \�I��TI�@N J=�@>DE�Y HKB! =�� �� HK�T��"�=����U���� !�" �E�"@>"DE�� LIP�� ��= ��=DE�� �U���� !�"UN ��� = =] O��H� !�����L�" U��I�"�R ��� \=�O��H� !������=� L��I�����@M��= E�DE�� ���� E�DE�� �P��@!^I� L ! =Q"LH�" E�DE�� O���������� L ! =Q"LH�"����� V=� = = ��"D�"\�"DE�� LB!��LJ�� !�"L�" ��� ��������� N ���IPZ �R E��ST �=���@>DE�_� L� BKB!�� �@"�=��� BN ��" ��JE�" D��O�!�D� LUN H�L@!��IH�B�D� UN H�DE�Y

L��I���� �@MIP�� N �� � ��D�UN ��� ��"D�"\�"�D� O�� H� !����� !�"L�" O������� �R E��ST D�K"HPC�R DE�� LD�K" @N QD� ���� !�" LIP��JE�" O��V=��� IH�B�O��I=���" �U����IH� ! =Q"�=� = =] �P��@!^I�\CD=�W \E��DP��" ���BN ��" �� LB! =��I=���"LIP�� L�����"V�K" L�UN _�I�DE��=� DI=@N Q =�R E� UN H�DE�Y

D=�WLIP�� LV=�@> @N `���=� �UN ����"��� E�D=�W J�@��V���BC��R D�E�"Y N �� � ��D�UN ��� ��"D�"\�"�D� O��H� !����� IH�B�L�" O������� UI�STD�] H��\CIP�� N �� ��U���� ��=��DE� UN H��H ��=DE� UN H��H N �� �J=� ��� ��������� �U�� @N �H��� LIP�� �L���@> �E�"J �" !�"UN ��� LD�K" @N QBC�/LD�K" @N QVC J�@��V���BC��R @>DE�Y

• S�@�@�KLH�"\=�" BN ��" – H�J�K"@�KHK !�"�=� b�@�UH�S�@�@�K !�"UN ��� LH�"\=�"�U�� @N �HBN ��" (���E�"�=� LD�K" @N Q\�"IC� O��H� !�����LIP��"� �U�� @N B!���IP�=� ����UP��" L��b!���IP� J����������UP BN ��" @N Q�=��� �� _�I�@>��")

• sIFR - (Scalable Inman Flash Replacement) �E�"J �"�=� LD�K" @N Qe UJ���f ����� Javascript ��H� ! =Q"�@>��" @A �" O��H� !������@M��= H� !�"L�" UJ���f @�K�=@� !�"LUN H� �@N ���"JC �U�� @N �HBN ��"

• ��UP�� - Cufon (CUstom FONts) _��BMDE�� Javascript @�K�=@�D��D��UN ��� H� !�"L�" @�K�U�� BN ��" (���E�"��I�� sIFR �CZ V�W��!����� J=�W �@N ��R DJ=� J����=JE�" O>���@���H� ��J��b��V��U�OC�� L\�@� �� LD�K" @N Q\�"I� �IPZ�@>I��)

• FLIR - O��V�l��@M��= PHP script ���e O��H� !������@M��= = = ��P"B!��LD�K" @N Q\�"�D� font-face ����� �=���E�DE�� H� LH�"\=�"@�K�=@� !�"L�" LJ=�L�J!��� \�I�J�@��@"BN ��"

I�� @N @> �E�"J �" !�"L�" LD�K" @N Q\�"�D� O��H� !����� !�" L��UN ��� = = L ���IH���� ��"D�"\�"�D� H�J�K"@�KHK !�"(Font-face) L�" S�@�@�K !�"UN ��� LH�"\=�" �U�� @N �HDE�� LIP�� E�DE�� L�BN L��o V=� N �� �J=� ������HP� �U�� @N �@"�=��� E� UN H��D��JE�" \=�D=�W ������HP� �U�� @N �=������ LIP�� H�J�K"@�KHK !�"L�" S�@�@�KLUN H� �@N ���"JCB! =�� �R � N ��� BN ��"��R ���� O��H� !�����] loading J�@�B! =�� �R � N ��� BN ��" H� !�"L�"J�K" LH�"\=�" S�@�@�K !�"LUN H� �@N ���"JC��D���R ���� O��V�l� � J=�L@�@C Bandwidth �����! T !�"@N �"�HBN ��" ����� LB! =QZ�D� �E�"J �" !�" �� ����UP��" L��b!�� !�" � = =O��H� !�����] Content !�"L�" ����UP BN ��" @N Q�=��� BN ��" _��D� L�"�E�"B!�� !�"�=� ���V=�����H@>DE�Y

Page 2: UnicodeAndFont Face

�������������������������������� @Font@Font@Font@Font----FaceFaceFaceFace CSS3 CSS3 CSS3 CSS3 �������������������� �������� !�"�������� !�"�������� !�"�������� !�"

2 | P a g e

by Mhaw Sayar on January 17, 2011 (http://mbl0gger.net/2011/01/unicode-font-face-css3-and-browsers)

�E��P��B!���E��P��B!���E��P��B!���E��P��B!��

CSS3 & MM3

���W ��������H�H� �=� J=�����\�"�D� �U���� !�" \P����=J�@A �" �����@=���" L\��@> @N `�� !�" L��� � LB! =QZ IH�O���=� �@N JE� I��D�J��� �@N JE� DP�"�L��� J�@��V��� �=���BC��R �D��JE�" @N `�� L�"J�K" J�K"O[`�K �@N JE�@A � _�e��" �I���e ��=��� �D"DE��=� �IPZ�DE�Y JI�I�J�IP�� HK�T��"�=��� N �� � �������� �U���� L ! =Q"LH�" !�" !�"@N �"HP� \P���@MJ�J!�� ��=DE�� �E�"I� O��V=��� ��"D�"D� UI�STD� N �� � J� ! =Q" !�" L�R �"IP��JE�" �������� V=�DE������ @I�D��e H=I�@>O��H�" T !�"HP� ��=J���R ���" N ���IPZ�J!�� ��=DE�Y \=�WL@N �� �=����KI������� � q�D�K" L��I���� �������� !�" �V��U�OC�� !�" ����� �E�"@E�V=����� @HrE�" !�"IP��JE�" �������� �E�"H�H�L�" � q�D�K" H�H�IH�B� LUN H� @=� =� �����@"J����R DE��=� �IPZ��=�DE�Y

D=�WLIP�� s�V���"@>"] �E��P��B!�� L��UN ��� I=�"I�� TD=�W [�"IE�J����D� N �� �H� ��������H�H� L�" ���W �BI�] �����V�K"�@M �E�"@E� !�" \�I����� !�" UN H�DE�� O���������� !�" (Internet Explore, Firefox, Google Chrome, Opera..etc) ����� CSS3 �E�"@E� I=�WL�" LD�K" @N Qe O��V=��� U��I�" ��"D�"D� !�"����� UI�STD� !�" LIP�� E�DE�� L�BN L��o V=� N �� �H�L�" LV���@N �B!�� PZHP� N ���IPZ UI�ST�=����H��� – _� �U�� @N J=�@>DE�Y

�������� �������� �������� �������� @@@@fontfontfontfont----face face face face ����� ����� ����� ����� CSS3CSS3CSS3CSS3

Myanmar Unicode

JP��BC��D� w ��H� ��J��b� ��"D�"BN ��" � q������ LO� �" L��=��L_��� UN ��� �@>���PC��� I�H����D� ��J !�"IP�� N �� � ��J��b�b> !�"����� O��V=��� U��I�"��"D�"D� !�" �R �"IP��JE�" N �� �J=� ��J��b���"�������� �=�����"\�"�D� ��J��b�IP�� N �� �J=� ��� ��������� N ������ �E�"J �" ! =Q"H�K D�K" @A �" J�@�BC��R DE��=� �I� = DI=��R J= �� E� \��@>DE�Y \=���J !�"IP�� @font-face, EOT (Embedded Open Type) HDE�� H��"J�K" !�"L�" ��J��b>I=���" ���"���" �y �"O�� BC��R J= �� E� UN H�DE�Y

\=���J !�"� = =] O��H� !������=� = =��"D�"�D� �U����L ! =Q"LH�"UN ��� �R E��STD� E�D�W LIP�� V=� ������HP� �U�� @N �H��� LD�K" @N Q�D� �E�"H�H�UN H�DE�� @font-face ����� EOT �E�"@E�DE� =���BS=��V��U�] L=���L�" �������� !�" LIP��D� LD�K"O��BC��D��JE�" ���W LDH�\P���@MJ�DE�� CSS3 �E�"H�H��=� LD�K" @N Q @A �" Lz=� L��I���� �������� !�" UN H��R �D� Firefox (since v 3.5) Google Chrome Browser (since v 4.0) LH��=DE�� �������� !�"IP��@> = = LD�K" @N QJ=��J� �U���� L ! =Q"LH�"�=� = =] O��H� !����� LIP��" IH�@>IE�" } @���K\E��DP��" �=��� @A � UN H�DE�Y

J�@��E�"J�@��E�"J�@��E�"J�@��E�"

J�@��E�" �� LJP��@�� JP����@>DE�Y L�BN BK D���I��" L��UN ��� [�"HP� = = LD�K" @N QJ=�DE�� �U���� L ! =Q"LH�"�=� ��P"B!��@A �" �U����U=����=� = =] O��V�l� �@MD=�WI���@> E�Y \=�W����� = =I��\�"�D� �U���� !�"L�" O�� H� !�����IP�� LD�K" @N Q��� �L���@> CSS ���� !�"L�" = = O��V=���] Cascading Style Sheet (CSS) LIP��" \E��DP��" �@"S�KD� UN H�DE�Y

Page 3: UnicodeAndFont Face

�������������������������������� @Font@Font@Font@Font----FaceFaceFaceFace CSS3 CSS3 CSS3 CSS3 �������������������� �������� !�"�������� !�"�������� !�"�������� !�"

3 | P a g e

by Mhaw Sayar on January 17, 2011 (http://mbl0gger.net/2011/01/unicode-font-face-css3-and-browsers)

@font-face { font-family: yourFontName ; src: url( /location/of/font/FontFileName.ttf ) format("truetype"); } /* Then use it like you would any other font */ .yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; }

�I�D�"��� �I�D�"��� �I�D�"��� �I�D�"���----

(�) L�@MIP�� � ��� @N BC��D� CSS ����\C��= yourFontName V=��D�����IP�� = = LD�K" @N QJ=��D� �U������ E��=� \E��DP��"� E� UN H� @A �" location L�"JE�" = = L@�J��� I��\�"�D� �U����] IE������=� LI=L�! �P�� @N �@"� E� UN H�@>DE�Y

(B) CSS3 UN ��� font-face ��R E�BN ��"IP�� “truetype” (ttf), “opentype” (ttf,otf), “truetype-aat (ttf), “embedded-opentype” (eot) ����� “scalable-vector-graphic” _��BM�D� (svg,svgz) LH��=DE�� �U���� L ! =Q"LH�" !�"L�" H=I��X =Q�� \E��DP��" LD�K" @N Q�=��� @>DE�Y

L@A �"DI� P �" K @N ��V��BN ��"L@A �"DI� P �" K @N ��V��BN ��"L@A �"DI� P �" K @N ��V��BN ��"L@A �"DI� P �" K @N ��V��BN ��"

=���BS=��V��U�DE� EOT (Embedded Open Type) �E�"@E�L�" L=���L�"l�"����"-� IP�� (F���) B���H� � HI��eLD�K" @N QBC�DE�Y @font-face UN ��� .eot font U=����=� LD�K" @N Q BN ��"DE� L=���L�"�������� !�" LIP��D� L�! =Q"D������� T ��=�H E� UN H� @A �" L\��IP�� �@N �V=�BC�DE�� CSS3 �E�"H�H�D�K" @font-face � � .ttf (True Type font) U=��� !�"�=� I=���S=��� �BMD�K" BN ��" UN ��� �"� N �BP" b�b�� BS� �" �L��@�� ����� @��"D�" V�U��� �C�D=�W�D� �������� !�" L\= O��"�=�"H�H�IP����� @��"D�" �P��@!^I� H�H� !�"IP��@> �!��@N �W�HP� L�! =Q"D������� T ��=�H E� UN H�DE�Y

True Type Font U=��� !�"L�" WEFT Tool �=� LD�K" @N Qe .eot file LUN H� �@N ���"JC�=���D�C�D=�W Online TTF->EOT Converter UN ���JE�" LJP��IH��� �@N ���"JC ����=���@>DE�Y .eot U=���L�" ���=J�@>� \=� .eot U=�������� ����" .ttf U=��� �- ! =Q"J�K"�=� LP��J=���"�@M��= = =I��J=��D����� IH�B�B�IP�� L@�J��� J�@��@> E�Y

@A �"J!�� L=���L�" L@>LO�� Lz=� �������� !�"IP�� = =LD�K" @N QJ=��D� �U����L ! =Q"LH�"L�" L A C ������HP� �U�� @N �=�����"LIP�� @font-face L�" �L���@>LI=���" @N E��H�K ������HP� ��R E��@"��� J=�L@� E� UN H�DE�Y

@font-face { font-family: " your FontName "; src: url( /location/of/font/FontFileName.eot ); /* IE */ src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */ } /* Then use it like you would any other font */ .yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; }

s����IP�� IH�B� �I�\�"�=���DE� �� O��H� !����� �@M�=� I��@A �" LD�K" @N Q E�� .eot UN H��H .ttf �U���� U=��� UN H��H E�DE�� �U����L ! =Q"LH�" V=� LP��J=���"�@MI��D�K" BN ��" UN H�DE�� LIP�� = =��H�D���� �� E��@" LD�K" @N Q�=��� @A �" local(“real FontName”) LIP��"��= �� E�IH�B�D�J!�� L=���L�"�������� _�I��D� LBN �" �������� !�"� LD�K" @N QD�] H��\C��= LHH�L ��� �U������ E��=� �BMD�K" E� UN H�DE�� LIP�� �� E�L ��� �@"\�"��� J=�L@� E� UN H�DE�Y

Page 4: UnicodeAndFont Face

�������������������������������� @Font@Font@Font@Font----FaceFaceFaceFace CSS3 CSS3 CSS3 CSS3 �������������������� �������� !�"�������� !�"�������� !�"�������� !�"

4 | P a g e

by Mhaw Sayar on January 17, 2011 (http://mbl0gger.net/2011/01/unicode-font-face-css3-and-browsers)

LBN �" J=�L@� E�� L�� !�"����� �I�D�"UP�� !�"LBN �" J=�L@� E�� L�� !�"����� �I�D�"UP�� !�"LBN �" J=�L@� E�� L�� !�"����� �I�D�"UP�� !�"LBN �" J=�L@� E�� L�� !�"����� �I�D�"UP�� !�"

FY EOT �BM Embedded Open Type Font L ! =Q"LH�"DE� =���BS=��V��U� �� ���\�I� L=���L�"(Internet Explore) IP��D� LJ�@�J�@�@>DE�Y

Myanmar3 Glyphs

IH��E�"L�"UN ��� L=���L�"DE� Open Type Font !�"�=�D� Embedded @N QJ�@� BN ��"�=� J��BK @A �" True Type Font !�"�=� Embedded J�@�D�K"HPC BN ��" LIP�� IH�H�KIH��� L�! =Q"D������� T ��=�H E� _�I�@>Y

�Y CSS3 IP�� .TTF Font File !�"L�" Embedded @N QJ�@�D�K"HPC BN ��"L�" Firefox 3.5 L@>LO�� Google Chrome, Opera, Safari LH��=�D� Lz=� O���������� !�"IP�� ������HP� �U�� @N �@"�=��� @A �" .eot L ! =Q"LH�" Open Type font file !�"LIP���=� � LV=�@> O���������� !�"IP�� J�K"O LJ�@�J�@� E� _�I�@>Y

�Y \=�W��R ���� �������� L�"J�K"IP�� = =D�K"HPCJ=��D� �U����L ! =Q"LH�"�=� ������HP� �U�� @N �=������LIP�� EOT L ! =Q"LH�" Open Type �U����U=��� !�"����� True Type L ! =Q"LH�" �U����U=��� !�" �=� ������HP� Embedded J�@��@"�=������ L��"�X �"@>DE�Y

�Y \=�D=�W �U����U=���L ! =Q"LH�" �- ! =Q"J�K"L�" Embedded J�@���IP�� @font-face CSS IP�� EOT �U����LIP�� “src” L�" “@\ ” ��R E��@"� E� UN H�DE�Y \=�D=�W ��R E���IP��JE�" “src” @A �"����� “url” �=�D� \E���@"��� J=�L@�@A �" “local” �=� \E���@"��� J=�L@�@>Y L������R ����V=��D�� “local” L�BMDE� LD�K" @N QD�] H��LIP��"��= �U����L ! =Q"LH�"�=� DP�"����� ����UP @A �" D�K"HPC BN ��" UN H� @A �" L=���L�" ��������IP�� LV=�@> J�@��V���B!�� @>O�� �D���R ���� UN H�DE�Y

wY @font-face �=� = = O��H� !�����LIP��" ������HP� ��"D�" LD�K" @N Q��� LB��LBC ��=D� !�" L��UN ��� = =D�K"J=��D� (��������) �U����L ! =Q"LH�" !�"�=� ��P"B!��@A �" @font-face kit generator IP�� �U���� !�"�=� L@�J��� J�@�e EOT File, WOFF, SVG ����� @font-face CSS file !�"�=� LJ=� L�J!��� \�I��� ���= �=���@>DE�Y

�Y @=� =� �!H�JH� �@>�@>"�D� EOT U=��� !�"�=� True Type Font File � IH�V��� U��I�"��� LIP�� � D� �� TTF file IH�B�L�" �G% L\= B!QKW\�"�D� EOT file !�"LUN H� �@N ���"JC�@"�=���DE�� EOT Fast �V��U�OC��� ��E��=��� E�UN H�DE�Y

�Y D�L=�������� J���IPZ H �"D@�B!�� !�" LV=�L� TTF (True Type Font) � EOT �@N ���"JCe LD�K" @N Q BN ��"\�� OTF (Open Type Font) � EOT �@N ���"JC LD�K" @N Q BN ��"� @=� =� \=����� T ��=DE��=� �IPZ��=\�"@A �" \=�D=�W Open Type � EOT �@N ���"JC LD�K" @N Q��� LIP�� �L���@>LI=���" LV���(�) V��� UN ��� J�@��V����=���DE�Y

(�) LD�K" @N Q E�� Open Type Font file L�" FontForge D=�W _�I� Free online Font Converter �IV��� True Type Font LUN H� �@N ���"JC@>Y

(B) ���=J��D� True Type Font �=� FontForge, WEFT Tool, Online TTF->EOT Converter, D=�W _�I� EOT Fast LH��=DE�� �V��U�OC�� IH� ! =Q" ! =Q"�=� LD�K" @N Qe EOT U=���LUN H� �@N ���"JC LD�K" @N Q�=��� E� UN H�DE�Y

Page 5: UnicodeAndFont Face

�������������������������������� @Font@Font@Font@Font----FaceFaceFaceFace CSS3 CSS3 CSS3 CSS3 �������������������� �������� !�"�������� !�"�������� !�"�������� !�"

5 | P a g e

by Mhaw Sayar on January 17, 2011 (http://mbl0gger.net/2011/01/unicode-font-face-css3-and-browsers)

�=b�K"�=b�K"�=b�K"�=b�K"

N �� � ���������E�"H�H� @=� =�L�BN B=���BK�J�BN ��" ��������] HKDI� �I�B!�� !�" LI=���" \�I�J�@� \�"�D� N �� ��U���� L ! =Q"LH�" !�" H�KJ��HP� \P����=J�BN ��" ��������] LD�K"O�� T !�"L�" J� !�" @=� =� ��"JE� J��BKJ��R BN ��" HDE�I=�W����� CSS3 ] @font-face ��P"B!���=��� BN ��" �E�"H�H������ � ����� O���������� !�" UN H��D� Firefox 3.5+, Google Chrome 4+, Opera, Safari I=�W] HP �"�V����E� !�" N ��� �"J�BN ��" HDE��LB!�� !�" I=�W��R ���� �B����C�D=�W O��H� !����� !�"IP�� N �� �J=� N �����"L�" Search Engine friendly UN H��D� b�@�UH� @�K�=@� !�" script !�"UN ��� @�K�U�� @N D�BN ��" HDE�� LB! =������ J�@��"DE�� J�@����" !�"L�" J�@��V������ J=�L@��I��@C E�DE�� L�BN L��o V=� N �� � O��H� !����� !�"L�" N �� �J=� �����" P��HP� N ���IPZ UI�ST�=���DE�� L�BN L��D=�W �������=J���@A � UN H�@>DE�Y

\=�WL@N �� @=� =��@>�@>" @=� =�JP����@A �" @=� =�e \=�����HP� LD�K" @N Q�=���DE�� CSS3 �E�"H�H� !�"UN ��� �R ��I���D� L��bI� !�"IP�� L ! =Q" ! =Q"�D� N �� � �������� �U���� !�"�=� LD�K" @N Qe N �� � O��H� !���� !�" �@MIP��JE�" Typography LD�"�@" U��I�" T !�" ��"D�" T !�" I��@N B!�� !�"L�" �IPZ N ���UP�� ��=��R ���" D�K"D@�� =@>DE�Y

�����V��IPC�����V��IPC�����V��IPC�����V��IPC

Unicode Unicode Unicode Unicode @@@@FontFontFontFont----face face face face � ���@�KHK !�"� ���@�KHK !�"� ���@�KHK !�"� ���@�KHK !�"

@font-face { font-family: 'Myanmar3'; src: url('mm3.eot'); src: local('☺'), url('mm3.woff') format('woff'), url('mm3.ttf') format('truetype'), url('mm3.svg#webfontlH3lev3U') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Padauk'; src: url('padauk.eot'); src: local('☺'), url('padauk.woff') format('woff'), url('padauk.ttf') format('truetype'), url('padauk.svg#webfont668fbyC3') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MasterpieceUniSans'; src: url('masterpiece.eot'); src: local('☺'), url('masterpiece.woff') format('woff'), url('masterpiece.ttf') format('truetype'), url('masterpiece.svg#webfontNFneJIzu') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Yunghkio'; src: url('yunghkio.eot'); src: local('☺'), url('yunghkio.woff') format('woff'), url('yunghkio.ttf') format('truetype'), url('yunghkio-webfont.svg#webfonttbHge4mW') format('svg'); font-weight: normal; font-style: normal;

Page 6: UnicodeAndFont Face

�������������������������������� @Font@Font@Font@Font----FaceFaceFaceFace CSS3 CSS3 CSS3 CSS3 �������������������� �������� !�"�������� !�"�������� !�"�������� !�"

6 | P a g e

by Mhaw Sayar on January 17, 2011 (http://mbl0gger.net/2011/01/unicode-font-face-css3-and-browsers)

}

L\��@> CSS Code !�"DE� @font-face kit generator IP�� = = LD�K" @N QJ=��D� �U����L ! =Q"LH�"�=� \E��DP��" Generate J�@� BN ��" UN ��� ���=J��D� ���� !�" UN H� @A �" J����= s ��J��b�IP�� D�K"HPC\�"@>DE�Y L\��@> ����LI=���" D�K"HPCJ=�D� !�" L��UN ��� ���� !�"L�" ����@� ��"���� = = O��H� !�����] CSS L@=���"IP�� \E��DP��" LD�K" @N Q�=���@>DE�Y ����IP��@>O���D� �U���� !�"L�"J�K" (EOT, TTF, WOFF, SVG) I=�WL�" �L���@> J���IP�� ��>��"J��� ����=��� @A �" = =] V=���IP�� LD�K" @N Q E� V=�@>� “src url” �������= �U����] IE�����L�" = = upload J�@�\�"DE�� ����D=�W ������HP� ���� @N \E��DP��" �@"��� J=�L@� E� UN H�@>DE�Y

=>> Download Web Embedded Myanmar Unicode Fonts

LD=�@"B!��LD=�@"B!��LD=�@"B!��LD=�@"B!��

L\��@> �V���"@>"IP�� D�K"HPC\�"D ��D� N �� � �������� �U���� !�" L�"J�K"DE� L !�"@N E�D� ���D�K"HPC�=������ UN �W�B!�\�"�D� ���� !�" � ��� LD�K" @N Q\�" BN ��" UN H� @A �" �U���� !�"] �� �@=���BP�������� @=���V=���BP��� L�@��@� �� LV=�@> �U���� !�"L�" U��I�" \�I�J�@�D� !�"D� UN H���R ���" �J"H�"HP� LD=�@"L@�@>DE�Y

�E�����"�=�"��"�E�����"�=�"��"�E�����"�=�"��"�E�����"�=�"��"

CSS3 Info

Expand Your Font Palette Using CSS3

Better @font-face Syntax

Bulletproof @font-face syntax

@font-face gotchas