{"id":315,"date":"2013-09-09T04:16:00","date_gmt":"2013-09-09T04:16:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/09\/09\/5-thuoc-tinh-cua-font-trong-css\/"},"modified":"2013-09-09T04:16:00","modified_gmt":"2013-09-09T04:16:00","slug":"5-thuoc-tinh-cua-font-trong-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/","title":{"rendered":"5 thu\u1ed9c t\u00ednh c\u1ee7a font trong CSS"},"content":{"rendered":"\n<p>CSS c\u00f3 r\u1ea5t nhi\u1ec1u thu\u1ed9c t\u00ednh, b\u1ea1n c\u00f3 th\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c trang web \u0111\u1eb9p m\u00e0 kh\u00f4ng c\u1ea7n bi\u1ebft t\u1ea5t c\u1ea3, nh\u01b0ng c\u00f3 m\u1ed9t v\u00e0i thu\u1ed9c t\u00ednh v\u00f4 c\u00f9ng quan tr\u1ecdng m\u00e0 b\u1ea1n kh\u00f4ng th\u1ec3 kh\u00f4ng bi\u1ebft &#8211; Font l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh nh\u01b0 v\u1eady.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d68bdfeb2\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d68bdfeb2\"  type=\"checkbox\" id=\"item-6577d68bdfeb2\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#Chem_gio\" title=\"Ch\u00e9m gi\u00f3\">Ch\u00e9m gi\u00f3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#Khai_bao_font_o_dau\" title=\"Khai b\u00e1o font \u1edf \u0111\u00e2u\">Khai b\u00e1o font \u1edf \u0111\u00e2u<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#Thuoc_tinh_font-family\" title=\"Thu\u1ed9c t\u00ednh font-family\">Thu\u1ed9c t\u00ednh font-family<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#Thuoc_tinh_font-size\" title=\"Thu\u1ed9c t\u00ednh font-size\">Thu\u1ed9c t\u00ednh font-size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#Thuoc_tinh_font-weight\" title=\"Thu\u1ed9c t\u00ednh font-weight\">Thu\u1ed9c t\u00ednh font-weight<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#Thuoc_tinh_font-style\" title=\"Thu\u1ed9c t\u00ednh font-style\">Thu\u1ed9c t\u00ednh font-style<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#Thuoc_tinh_font-variant\" title=\"Thu\u1ed9c t\u00ednh font-variant\">Thu\u1ed9c t\u00ednh font-variant<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#Viet_tat_khi_khai_bao_thuoc_tinh_cho_Font\" title=\"Vi\u1ebft t\u1eaft khi khai b\u00e1o thu\u1ed9c t\u00ednh cho Font\">Vi\u1ebft t\u1eaft khi khai b\u00e1o thu\u1ed9c t\u00ednh cho Font<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#Nhung_font_la_vao_web_bang_CSS3\" title=\"Nh\u00fang font l\u1ea1 v\u00e0o web b\u1eb1ng CSS3\">Nh\u00fang font l\u1ea1 v\u00e0o web b\u1eb1ng CSS3<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Chem_gio\"><\/span>Ch\u00e9m gi\u00f3<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Trong th\u1ebf gi\u1edbi web c\u00f3 kho\u1ea3ng 10 font ph\u1ed5 bi\u1ebfn r\u1ea5t hay \u0111\u01b0\u1ee3c nh\u00e0 thi\u1ebft k\u1ebf s\u1eed d\u1ee5ng. C\u00f3 nhi\u1ec1u nguy\u00ean nh\u00e2n nh\u01b0ng ch\u1ee7 y\u1ebfu l\u00e0 v\u00ec c\u00e1c font n\u00e0y h\u1ea7u nh\u01b0 \u0111\u00e3 \u0111\u01b0\u1ee3c c\u00e0i s\u1eb5n tr\u00ean m\u00e1y ng\u01b0\u1eddi d\u00f9ng r\u1ed3i, th\u1ee9 n\u1eefa \u0111\u00e2y l\u00e0 nh\u1eefng font quen m\u1eaft \u0111\u00e3 ch\u1ee9ng minh \u0111\u01b0\u1ee3c t\u00ednh ph\u1ed5 th\u00f4ng v\u00e0 d\u1ec5 \u0111\u1ecdc.<\/p>\n\n\n\n<p>Ti\u1ebfng Anh hay c\u00e1c ng\u00f4n ng\u1eef ch\u00e2u \u00c2u n\u00f3i chung c\u00f3 r\u1ea5t nhi\u1ec1u font \u0111\u1eb9p &#8211; \u0111\u1ed9c v\u00e0 l\u1ea1 nh\u01b0ng ti\u1ebfng Vi\u1ec7t th\u00ec \u00edt h\u01a1n nhi\u1ec1u, \u0111\u01a1n gi\u1ea3n l\u00e0 v\u00ec khi c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf t\u1ea1o ra font m\u1edbi h\u1ecd kh\u00f4ng ph\u1ea3i l\u00fac n\u00e0o c\u0169ng quan t\u00e2m \u0111\u1ebfn c\u00e1c ng\u00f4n ng\u1eef kh\u00e1c \u0111\u01b0\u1ee3c, c\u00e1c ch\u1eef c\u00e1i mang t\u00ednh Vi\u1ec7t Nam nh\u01b0 \u0111, \u01a1, \u00ea, \u00f4&#8230;s\u1ebd v\u1eafng m\u1eb7t.<\/p>\n\n\n\n<p>D\u0129 nhi\u00ean c\u00e1c font ph\u1ed5 bi\u1ebfn th\u00ec ch\u00fang h\u1ed7 tr\u1ee3 ti\u1ebfng Vi\u1ec7t r\u1ea5t t\u1ed1t v\u00e0 n\u1ebfu kh\u00f4ng c\u00f3 nhu c\u1ea7u g\u00ec \u0111\u1eb7c bi\u1ec7t &#8211; s\u1eed d\u1ee5ng c\u00e1c font ph\u1ed5 th\u00f4ng l\u00e0 \u0111\u1ee7 cho b\u1ea1n.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Khai_bao_font_o_dau\"><\/span>Khai b\u00e1o font \u1edf \u0111\u00e2u<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Gi\u1edd ch\u00fang ta s\u1ebd quay v\u1ec1 ch\u1ee7 \u0111\u1ec1 ch\u00ednh &#8211; c\u00e2u h\u1ecfi \u0111\u1ea7u ti\u00ean: t\u00f4i ph\u1ea3i khai b\u00e1o thu\u1ed9c t\u00ednh font \u1edf \u0111\u00e2u?<\/p>\n\n\n\n<p>C\u00e2u tr\u1ea3 l\u1eddi l\u00e0: n\u1ebfu b\u1ea1n mu\u1ed1n \u00e1p d\u1ee5ng cho th\u1ebb n\u00e0o th\u00ec khai b\u00e1o font cho th\u1ebb \u0111\u00f3, nh\u01b0ng khai b\u00e1o \u0111\u1ea7u ti\u00ean li\u00ean quan \u0111\u1ebfn font chung tr\u00ean to\u00e0n trang web th\u00ec b\u1ea1n n\u00ean d\u00f9ng <a href=\"https:\/\/kiencang.net\/the-body-trong-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u1ebb body<\/a>, v\u00ec t\u1ea5t c\u1ea3 ph\u1ea7n v\u0103n b\u1ea3n hi\u1ec3n th\u1ecb ra b\u00ean ngo\u00e0i \u0111\u1ec1u n\u1eb1m trong body. Vi d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {CSS cho font;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_font-family\"><\/span>Thu\u1ed9c t\u00ednh font-family<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u01a1i \u0111\u00e2y khai b\u00e1o v\u1ec1 lo\u1ea1i font b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng, v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {font-family:\"Times New Roman\", Times, serif;}<\/code><\/pre>\n\n\n\n<p>D\u00f2ng khai b\u00e1o tr\u00ean n\u00f3i v\u1edbi tr\u00ecnh duy\u1ec7t r\u1eb1ng h\u00e3y s\u1eed d\u1ee5ng font ch\u1eef <b>Times New Roman<\/b> cho trang web c\u1ee7a t\u00f4i, n\u1ebfu kh\u00f4ng c\u00f3 th\u00ec s\u1eed d\u1ee5ng font <b>Times<\/b> \u0111\u1ec3 thay th\u1ebf, n\u1ebfu v\u1eabn kh\u00f4ng c\u00f3 n\u1ed1t h\u00e3y s\u1eed d\u1ee5ng b\u1ea5t k\u1ef3 font n\u00e0o <b>thu\u1ed9c h\u1ecd Serif<\/b> (d\u00f2ng font c\u00f3 ch\u00e2n) \u0111\u1ec3 thay th\u1ebf.<\/p>\n\n\n\n<p>V\u1ec1 c\u1ea5u tr\u00fac, s\u1ebd b\u1eaft \u0111\u1ea7u b\u1eb1ng font mu\u1ed1n d\u00f9ng, ti\u1ebfp theo l\u00e0 font thay th\u1ebf, cu\u1ed1i c\u00f9ng l\u00e0 h\u1ecd font. C\u00f3 th\u1ec3 b\u1ea1n s\u1ebd h\u1ecfi Serif l\u00e0 g\u00ec? n\u00f3 ch\u00ednh l\u00e0 h\u1ecd font c\u00f3 ch\u00e2n g\u1ed3m r\u1ea5t nhi\u1ec1u font kh\u00e1c nhau, b\u1ea3n th\u00e2n Time New Roman v\u00e0 Times c\u0169ng thu\u1ed9c h\u1ecd Serif.<\/p>\n\n\n\n<p>C\u00f3 5 h\u1ecd font ch\u00ednh m\u00e0 t\u1ea5t c\u1ea3 c\u00e1c font s\u1ebd \u0111\u01b0\u1ee3c x\u1ebfp lo\u1ea1i v\u00e0o 5 h\u1ecd n\u00e0y. Danh s\u00e1ch c\u1ee7a ch\u00fang \u1edf ngay d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n\n<ol><li>Serif: nh\u1eefng font c\u00f3 ch\u00e2n ch\u1eef l\u00e0 nh\u1eefng \u0111\u01b0\u1eddng n\u00e9t nh\u1ecf \u1edf cu\u1ed1i m\u1ed7i n\u00e9t.<\/li><li>Sans-serif: nh\u1eefng font kh\u00f4ng c\u00f3 ch\u00e2n ch\u1eef.<\/li><li>Monospace: c\u00e1c font hay \u0111\u01b0\u1ee3c d\u00f9ng cho c\u00e1c d\u00f2ng code.<\/li><li>Cursive: c\u00e1c font gi\u1ed1ng ch\u1eef vi\u1ebft tay.<\/li><li>Fantasy: font l\u1ea1 m\u1eaft m\u00e0 ch\u00fang ta r\u1ea5t \u00edt d\u00f9ng.<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_font-size\"><\/span>Thu\u1ed9c t\u00ednh font-size<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 khai b\u00e1o k\u00edch th\u01b0\u1edbc font, v\u00ed d\u1ee5: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {font-size: 12px;}<\/code><\/pre>\n\n\n\n<p>T\u1ee9c l\u00e0 <span style=\"font-size: 12px;\">k\u00edch c\u1ee1 font m\u00e0 t\u00f4i mu\u1ed1n d\u00f9ng l\u00e0 12px<\/span>, ngo\u00e0i ra b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c \u0111\u01a1n v\u1ecb kh\u00e1c nh\u01b0 % ho\u1eb7c em \u0111\u1ec3 ch\u1ec9 th\u1ecb k\u00edch th\u01b0\u1edbc &#8211; t\u00f4i th\u01b0\u1eddng s\u1eed d\u1ee5ng px h\u01a1n m\u1eb7c d\u00f9 c\u00f3 nghe n\u00f3i \u0111\u1ebfn l\u1ee3i \u00edch c\u1ee7a c\u00e1ch d\u00f9ng em.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_font-weight\"><\/span>Thu\u1ed9c t\u00ednh font-weight<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>D\u00f9ng \u0111\u1ec1 hi\u1ec3n th\u1ecb ch\u1eef \u0111\u1eadm ho\u1eb7c th\u01b0\u1eddng, v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#boidam {font-weight: bold;}<\/code><\/pre>\n\n\n\n<p>D\u00f2ng tr\u00ean s\u1ebd l\u00e0m <b>ch\u1eef c\u1ee7a font \u0111\u1eadm l\u00ean<\/b>, ngo\u00e0i ra, c\u00e1c gi\u00e1 tr\u1ecb kh\u00e1c m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 khai b\u00e1o l\u00e0:<\/p>\n\n\n\n<ul><li>Gi\u00e1 tr\u1ecb s\u1ed1 100, 200 cho \u0111\u1ebfn 900;<\/li><li>C\u00e1c t\u1eeb \u0111\u1ec3 m\u00f4 t\u1ea3 g\u1ed3m: <em>lighter<\/em>, <em>normal<\/em>, <em>bold<\/em> v\u00e0 <em>bolder<\/em>. Gi\u00e1 tr\u1ecb normal l\u00e0m cho font kh\u00f4ng \u0111\u1eadm hay nh\u1ea1t \u0111i.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_font-style\"><\/span>Thu\u1ed9c t\u00ednh font-style<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u01a1n gi\u1ea3n d\u00f9ng \u0111\u1ec3 quy\u1ebft \u0111\u1ecbnh xem&nbsp;<em>font \u0111\u01b0\u1ee3c in nghi\u00eang<\/em>&nbsp;hay th\u01b0\u1eddng, v\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {font-style: italic;}<\/code><\/pre>\n\n\n\n<p>C\u00e1c gi\u00e1 tr\u1ecb kh\u00e1c m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 khai b\u00e1o l\u00e0 normal v\u00e0 oblique. Gi\u00e1 tr\u1ecb oblique c\u0169ng l\u00e0m cho&nbsp;font nghi\u00eang gi\u1ed1ng italic.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Thuoc_tinh_font-variant\"><\/span>Thu\u1ed9c t\u00ednh font-variant<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Thu\u1ed9c t\u00ednh n\u00e0y ch\u1ec9 nh\u1eadn 2 gi\u00e1 tr\u1ecb l\u00e0 <code>normal<\/code> ho\u1eb7c <code>small-caps<\/code>. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {font-variant: small-caps;}<\/code><\/pre>\n\n\n\n<div>\n<p>D\u00f2ng l\u1ec7nh tr\u00ean khi\u1ebfn t\u1ea5t c\u1ea3 ch\u1eef c\u00e1i in th\u01b0\u1eddng \u0111\u01b0\u1ee3c <span style=\"font-variant: small-caps;\">vi\u1ebft in hoa k\u00edch th\u01b0\u1edbc nh\u1ecf<\/span>.<\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Viet_tat_khi_khai_bao_thuoc_tinh_cho_Font\"><\/span>Vi\u1ebft t\u1eaft khi khai b\u00e1o thu\u1ed9c t\u00ednh cho Font<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u1ebfu mu\u1ed1n b\u1ea1n c\u00f3 th\u1ec3 khai b\u00e1o c\u00e1c thu\u1ed9c t\u00ednh cho Font theo c\u00e1ch \u0111\u01a1n gi\u1ea3n h\u01a1n kh\u00e1 nhi\u1ec1u so v\u1edbi c\u00e1ch vi\u1ebft t\u1eebng thu\u1ed9c t\u00ednh c\u1ee5 th\u1ec3 \u1edf tr\u00ean. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {font: italic bold 17px Courier, monospace;}<\/code><\/pre>\n\n\n\n<div><span style=\"font: italic bold 17px Courier, monospace;\">D\u00f2ng tr\u00ean s\u1ebd l\u00e0m cho font \u0111\u01b0\u1ee3c in nghi\u00eang v\u00e0 \u0111\u1eadm c\u00f3 k\u00edch c\u1ee1 17px v\u00e0 lo\u1ea1i font l\u00e0 Courier<\/span>.<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Gi\u1edd c\u00f3 m\u1ed9t c\u00e2u h\u1ecfi l\u00e0: trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n kh\u00f4ng quy \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc c\u0169ng nh\u01b0 ki\u1ec3u font th\u00ec theo m\u1eb7c \u0111\u1ecbnh tr\u00ecnh duy\u1ec7t s\u1ebd hi\u1ec3n th\u1ecb font nh\u01b0 th\u1ebf n\u00e0o? <\/p>\n\n\n\n<p>T\u00f4i th\u1eed c\u1ea3 hai tr\u00ecnh duy\u1ec7t Google Chrome v\u00e0 FireFox, k\u1ebft qu\u1ea3 cho th\u1ea5y ch\u00fang d\u00f9ng font ch\u1eef c\u00f3 ch\u00e2n v\u1edbi k\u00edch th\u01b0\u1edbc kho\u1ea3ng 12px. <\/p>\n\n\n\n<p>D\u0129 nhi\u00ean trong th\u1ef1c t\u1ebf vi\u1ec7c kh\u00f4ng quy \u0111\u1ecbnh font cho trang web trong CSS l\u00e0 \u0111i\u1ec1u kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p x\u1ea3y ra v\u1edbi ng\u01b0\u1eddi code web ngay c\u1ea3 \u1edf tr\u00ecnh \u0111\u1ed9 s\u01a1 c\u1ea5p.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nhung_font_la_vao_web_bang_CSS3\"><\/span>Nh\u00fang font l\u1ea1 v\u00e0o web b\u1eb1ng CSS3<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng c\u00e1c font l\u1ea1 m\u1eaft, \u0111\u1eb9p v\u00e0 g\u00e2y \u00e2n \u1ea5n t\u01b0\u1ee3ng v\u1edbi ng\u01b0\u1eddi \u0111\u1ecdc h\u00e3y th\u1eed s\u1eed d\u1ee5ng\u00a0<a href=\"https:\/\/kiencang.net\/nhung-font-web-font-face\/\" target=\"_blank\" rel=\"noreferrer noopener\">@font-face trong CSS3<\/a>. \u0110i\u1ec3m kh\u00e1c bi\u1ec7t duy nh\u1ea5t l\u00e0 ch\u00fang ta s\u1ebd ph\u1ea3i cung c\u1ea5p \u0111\u01b0\u1eddng d\u1eabn c\u1ee7a font \u0111\u1ed9c \u0111\u00e1o \u0111\u1ec3 tr\u00ecnh duy\u1ec7t ng\u01b0\u1eddi d\u00f9ng t\u1ea3i v\u1ec1 (qu\u00e1 tr\u00ecnh n\u00e0y t\u1ef1 \u0111\u1ed9ng) r\u1ed3i s\u1eed d\u1ee5ng.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS c\u00f3 r\u1ea5t nhi\u1ec1u thu\u1ed9c t\u00ednh, b\u1ea1n c\u00f3 th\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c trang web \u0111\u1eb9p m\u00e0 kh\u00f4ng c\u1ea7n bi\u1ebft t\u1ea5t c\u1ea3, nh\u01b0ng c\u00f3 m\u1ed9t v\u00e0i thu\u1ed9c t\u00ednh v\u00f4 c\u00f9ng quan tr\u1ecdng m\u00e0 b\u1ea1n kh\u00f4ng th\u1ec3 kh\u00f4ng bi\u1ebft &#8211; Font l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh nh\u01b0 v\u1eady. Ch\u00e9m gi\u00f3 Trong th\u1ebf gi\u1edbi web c\u00f3 kho\u1ea3ng 10 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>5 thu\u1ed9c t\u00ednh c\u1ee7a font trong CSS &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 thu\u1ed9c t\u00ednh c\u1ee7a font trong CSS &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"CSS c\u00f3 r\u1ea5t nhi\u1ec1u thu\u1ed9c t\u00ednh, b\u1ea1n c\u00f3 th\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c trang web \u0111\u1eb9p m\u00e0 kh\u00f4ng c\u1ea7n bi\u1ebft t\u1ea5t c\u1ea3, nh\u01b0ng c\u00f3 m\u1ed9t v\u00e0i thu\u1ed9c t\u00ednh v\u00f4 c\u00f9ng quan tr\u1ecdng m\u00e0 b\u1ea1n kh\u00f4ng th\u1ec3 kh\u00f4ng bi\u1ebft &#8211; Font l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh nh\u01b0 v\u1eady. Ch\u00e9m gi\u00f3 Trong th\u1ebf gi\u1edbi web c\u00f3 kho\u1ea3ng 10 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-09-09T04:16:00+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 thu\u1ed9c t\u00ednh c\u1ee7a font trong CSS &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/","og_locale":"vi_VN","og_type":"article","og_title":"5 thu\u1ed9c t\u00ednh c\u1ee7a font trong CSS &#8226; Ki\u1ebfn c\u00e0ng","og_description":"CSS c\u00f3 r\u1ea5t nhi\u1ec1u thu\u1ed9c t\u00ednh, b\u1ea1n c\u00f3 th\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c trang web \u0111\u1eb9p m\u00e0 kh\u00f4ng c\u1ea7n bi\u1ebft t\u1ea5t c\u1ea3, nh\u01b0ng c\u00f3 m\u1ed9t v\u00e0i thu\u1ed9c t\u00ednh v\u00f4 c\u00f9ng quan tr\u1ecdng m\u00e0 b\u1ea1n kh\u00f4ng th\u1ec3 kh\u00f4ng bi\u1ebft &#8211; Font l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh nh\u01b0 v\u1eady. Ch\u00e9m gi\u00f3 Trong th\u1ebf gi\u1edbi web c\u00f3 kho\u1ea3ng 10 &hellip;","og_url":"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-09-09T04:16:00+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/","url":"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/","name":"5 thu\u1ed9c t\u00ednh c\u1ee7a font trong CSS &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-09-09T04:16:00+00:00","dateModified":"2013-09-09T04:16:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/5-thuoc-tinh-cua-font-trong-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"5 thu\u1ed9c t\u00ednh c\u1ee7a font trong CSS"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/315"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/315\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}