css - @font-face

[sevensigns.lk]

අපි දැන් බලමු @font-face කොහොමද use කරන්නේ කියලා

@font-face{
/*font-face properties here*/
}
අපි බලමු @font-face වල use කරන්න පුලුවන් fonts වර්ග මොනාද කියලා

webfont.eot
webfont.woff
webfont.ttf
webfont.svg

web font generator
ඔයාලගේ photoshop fonts වල tiff file එක upload(max 5mb) කරලා

zip file එකක් download කර ගන්න පුලුවන් .

@font-face use කරන විදිය css file එකේ
@font-face{

font-family:"examplefont";
src:url(webfont.woff);
}
නමුත් මෙහේම use කරන්න පුලුවන් අලුත් browser වල විතරයි.
එකට විසදුමක් විදියට css-tricks website එකේ මේහෙම විසදුමක් තිබුනා.

@font-face {

font-family:'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff') /* Modern Browsers */
src: url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

අපි දැන් බලමු < p> එකකට @font-face කොහොමද භාවිතා කරන්නෙ කියලා.

p { font-family: 'MyFontFamily', Fallback, sans-serif; }

අලුත් font-family එක වැඩ කරේ නැතු උනොත් fallback font එකක් විදියට web-safe san-srif use කරමු.


sevensigns.lk
source article

 

[P_Namal]

ela mcn keep it up

 

[rhn123]

elaz