{"id":14491,"date":"2021-09-04T04:05:17","date_gmt":"2021-09-04T04:05:17","guid":{"rendered":"https:\/\/freehost.page\/?p=14491"},"modified":"2021-09-04T04:05:17","modified_gmt":"2021-09-04T04:05:17","slug":"meo-voi-font-face","status":"publish","type":"post","link":"https:\/\/kiencang.net\/meo-voi-font-face\/","title":{"rendered":"M\u1eb9o v\u1edbi @font-face: \u0111\u1ecbnh ngh\u0129a font-weight v\u00e0 font-style \u0111\u1ec3 gi\u1eef CSS c\u1ee7a b\u1ea1n \u0111\u01a1n gi\u1ea3n h\u01a1n"},"content":{"rendered":"\n<p>Khi ch\u00fang ta <a href=\"https:\/\/kiencang.net\/nhung-font-web-font-face\/\" target=\"_blank\" rel=\"noreferrer noopener\">s\u1eed d\u1ee5ng @font-face \u0111\u1ec3 nh\u00fang font v\u00e0o website<\/a>, m\u00e0 b\u1ea3n th\u00e2n font \u0111\u00f3 c\u00f3 m\u1ed9t s\u1ed1 weight (\u0111\u1ed9 \u0111\u1eadm nh\u1ea1t, light, bold,&#8230;) v\u00e0 style (nghi\u00eang, italic) kh\u00e1c nhau th\u00ec CSS c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 tr\u00f4ng r\u1ed1i n\u1ebfu b\u1ea1n kh\u00f4ng \u0111\u1ecbnh ngh\u0129a nh\u1eefng weight v\u00e0 style n\u00e0y trong khai b\u00e1o (declarations) c\u1ee7a @font-face. Kh\u00f4ng may l\u00e0 m\u1ed9t s\u1ed1 h\u01b0\u1edbng d\u1eabn v\u00e0 c\u00e1c d\u1ecbch v\u1ee5 nh\u00fang font l\u1ea1i kh\u00f4ng l\u00e0m t\u1ed1t \u0111i\u1ec1u n\u00e0y.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Khao b\u00e1o nhi\u1ec1u t\u00ean font-family cho c\u00f9ng m\u1ed9t ki\u1ec3u font s\u1ebd l\u00e0m CSS c\u1ee7a b\u1ea1n tr\u1edf n\u00ean ph\u1ee9c t\u1ea1p<\/h2>\n\n\n\n<p>OK, gi\u1edd ch\u00fang ta s\u1ebd xem v\u1ea5n \u0111\u1ec1 n\u00e0y l\u00e0 g\u00ec. V\u00ed d\u1ee5 nh\u01b0 b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng ki\u1ec3u font Droid Serif v\u00e0 t\u1ef1 host n\u00f3 tr\u00ean m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n. M\u1ed9t t\u00f9y ch\u1ecdn d\u1ec5 d\u00e0ng l\u00e0 l\u1ea5y b\u1ed9 <a href=\"https:\/\/www.fontsquirrel.com\/fonts\/font-awesome\" target=\"_blank\" rel=\"noreferrer noopener\">kit @font-face<\/a> d\u00f9ng \u0111\u01b0\u1ee3c lu\u00f4n t\u1eeb Font Squirrel. M\u00e3 CSS trong b\u1ed9 kit tr\u00f4ng gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y (nhi\u1ec1u khai b\u00e1o <code>src<\/code> \u0111\u00e3 \u0111\u01b0\u1ee3c x\u00f3a \u0111\u1ec3 ti\u1ebft ki\u1ec7m kh\u00f4ng gian):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n\tfont-family: 'DroidSerifRegular';\n\tsrc: url('DroidSerif-Regular-webfont.ttf') format('truetype');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n\n@font-face {\n\tfont-family: 'DroidSerifItalic';\n\tsrc: url('DroidSerif-Italic-webfont.ttf') format('truetype');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n\n@font-face {\n\tfont-family: 'DroidSerifBold';\n\tsrc: url('DroidSerif-Bold-webfont.ttf') format('truetype');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n\n@font-face {\n\tfont-family: 'DroidSerifBoldItalic';\n\tsrc: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');\n\tfont-weight: normal;\n\tfont-style: normal;\n}<\/code><\/pre>\n\n\n\n<p>V\u1edbi CSS \u1edf tr\u00ean, t\u1eebng font name ri\u00eang bi\u1ec7t \u0111\u01b0\u1ee3c khai b\u00e1o cho t\u1eebng weight v\u00e0 style, l\u00e0m b\u1ea1n bu\u1ed9c ph\u1ea3i vi\u1ebft CSS gi\u1ed1ng nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body { font-family:\"DroidSerifRegular\", Georgia, serif; }\n\nh1 {\n\tfont-family:\"DroidSerifBold\", Georgia, serif;\n\tfont-weight:normal;\n}\n\nem {\n\tfont-family:\"DroidSerifItalic\", Georgia, serif;\n\tfont-weight:normal;\n\tfont-style:normal;\n}\n\nstrong em {\n\tfont-family:\"DroidSerifBoldItalic\", Georgia, serif;\n\tfont-weight:normal;\n\tfont-style:normal;\n}<\/code><\/pre>\n\n\n\n<p>M\u1ed7i khi b\u1ea1n c\u1ea7n m\u1ed9t style kh\u00e1c, b\u1ea1n s\u1ebd ph\u1ea3i reset l\u1ea1i style m\u1eb7c \u0111\u1ecbnh v\u1ec1 normal \u0111\u1ec3 ng\u0103n c\u00e1c tr\u00ecnh duy\u1ec7t \u00e1p d\u1ee5ng style \u0111\u1eadm v\u00e0 nghi\u00eang gi\u1ea3 \u1edf font m\u00e0 n\u00f3 \u0111\u00e3 t\u1ea3i xu\u1ed1ng. \u0110i\u1ec1u n\u00e0y kh\u00f4ng ch\u1ec9 l\u00e0m cho CSS c\u1ee7a b\u1ea1n kh\u00f3 s\u1eed d\u1ee5ng &#8211; n\u00f3 c\u00f2n lo\u1ea1i b\u1ecf ch\u1eef in \u0111\u1eadm v\u00e0 in nghi\u00eang trong c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00f4ng h\u1ed7 tr\u1ee3 @font-face ho\u1eb7c trong tr\u01b0\u1eddng h\u1ee3p t\u1ec7p font b\u1ecb t\u1ea3i xu\u1ed1ng kh\u00f4ng \u0111\u00fang c\u00e1ch.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">S\u1eed d\u1ee5ng c\u00f9ng t\u00ean font-family l\u00e0m cho m\u1ecdi th\u1ee9 tr\u1edf n\u00ean \u0111\u01a1n gi\u1ea3n h\u01a1n v\u00e0 \u0111em l\u1ea1i kh\u1ea3 n\u0103ng d\u1ef1 ph\u00f2ng<\/h2>\n\n\n\n<p>B\u1eb1ng c\u00e1ch thay \u0111\u1ed5i khai b\u00e1o <code>font-weight<\/code> v\u00e0 <code>font-style<\/code> cho t\u1eebng quy t\u1eafc <code>@font-face<\/code> \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi thu\u1ed9c t\u00ednh c\u1ee7a font, v\u00e0 s\u1eed d\u1ee5ng c\u00f9ng t\u00ean cho t\u00ean <code>font-family<\/code> cho t\u1eebng rule, ch\u00fang ta s\u1ebd kh\u00f4ng bao gi\u1edd c\u1ea7n ph\u1ea3i qu\u00e1 chi ti\u1ebft trong CSS c\u1ee7a m\u00ecnh n\u1eefa.<\/p>\n\n\n\n<p>Khai b\u00e1o n\u00ean \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n\tfont-family: 'DroidSerif';\n\tsrc: url('DroidSerif-Regular-webfont.ttf') format('truetype');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n\n@font-face {\n\tfont-family: 'DroidSerif';\n\tsrc: url('DroidSerif-Italic-webfont.ttf') format('truetype');\n\tfont-weight: normal;\n\tfont-style: italic;\n}\n\n@font-face {\n\tfont-family: 'DroidSerif';\n\tsrc: url('DroidSerif-Bold-webfont.ttf') format('truetype');\n\tfont-weight: bold;\n\tfont-style: normal;\n}\n\n@font-face {\n\tfont-family: 'DroidSerif';\n\tsrc: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');\n\tfont-weight: bold;\n\tfont-style: italic;\n}<\/code><\/pre>\n\n\n\n<p>Gi\u1edd b\u1ea1n c\u00f3 th\u1ec3 ch\u1ec9 \u0111\u1ecbnh <code>font-weight:bold<\/code> ho\u1eb7c <code>font-style:italic<\/code> cho b\u1ea5t c\u1ee9 th\u00e0nh ph\u1ea7n n\u00e0o b\u1ea1n mu\u1ed1n m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i ch\u1ec9 \u0111\u1ecbnh <code>font-family<\/code> c\u1ee5 th\u1ec3 ho\u1eb7c ghi \u0111\u00e8 <code>font-weight<\/code> v\u00e0 <code>font-style<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body { font-family:\"DroidSerif\", Georgia, serif; }\n\nh1 { font-weight:bold; }\n\nem { font-style:italic; }\n\nstrong em {\n\tfont-weight:bold;\n\tfont-style:italic;\n}<\/code><\/pre>\n\n\n\n<p>M\u1ed9t l\u1ee3i \u00edch kh\u00e1c l\u00e0: trong tr\u01b0\u1eddng h\u1ee3p <code>@font-face<\/code> kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 ho\u1eb7c file font kh\u00f4ng t\u1ea3i v\u1ec1 th\u00e0nh c\u00f4ng, tr\u00ecnh duy\u1ec7t s\u1ebd c\u00f3 d\u1ef1 ph\u00f2ng. <\/p>\n\n\n\n<p><em>(L\u01b0\u1ee3c d\u1ecbch t\u1eeb b\u00e0i vi\u1ebft c\u1ee7a t\u00e1c gi\u1ea3 Roger Johansson tr\u00ean trang 456bereastreet)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Khi ch\u00fang ta s\u1eed d\u1ee5ng @font-face \u0111\u1ec3 nh\u00fang font v\u00e0o website, m\u00e0 b\u1ea3n th\u00e2n font \u0111\u00f3 c\u00f3 m\u1ed9t s\u1ed1 weight (\u0111\u1ed9 \u0111\u1eadm nh\u1ea1t, light, bold,&#8230;) v\u00e0 style (nghi\u00eang, italic) kh\u00e1c nhau th\u00ec CSS c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 tr\u00f4ng r\u1ed1i n\u1ebfu b\u1ea1n kh\u00f4ng \u0111\u1ecbnh ngh\u0129a nh\u1eefng weight v\u00e0 style n\u00e0y trong khai b\u00e1o (declarations) c\u1ee7a @font-face. &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","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>M\u1eb9o v\u1edbi @font-face: \u0111\u1ecbnh ngh\u0129a font-weight v\u00e0 font-style \u0111\u1ec3 gi\u1eef CSS c\u1ee7a b\u1ea1n \u0111\u01a1n gi\u1ea3n h\u01a1n &#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\/meo-voi-font-face\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"M\u1eb9o v\u1edbi @font-face: \u0111\u1ecbnh ngh\u0129a font-weight v\u00e0 font-style \u0111\u1ec3 gi\u1eef CSS c\u1ee7a b\u1ea1n \u0111\u01a1n gi\u1ea3n h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Khi ch\u00fang ta s\u1eed d\u1ee5ng @font-face \u0111\u1ec3 nh\u00fang font v\u00e0o website, m\u00e0 b\u1ea3n th\u00e2n font \u0111\u00f3 c\u00f3 m\u1ed9t s\u1ed1 weight (\u0111\u1ed9 \u0111\u1eadm nh\u1ea1t, light, bold,&#8230;) v\u00e0 style (nghi\u00eang, italic) kh\u00e1c nhau th\u00ec CSS c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 tr\u00f4ng r\u1ed1i n\u1ebfu b\u1ea1n kh\u00f4ng \u0111\u1ecbnh ngh\u0129a nh\u1eefng weight v\u00e0 style n\u00e0y trong khai b\u00e1o (declarations) c\u1ee7a @font-face. &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/meo-voi-font-face\/\" \/>\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=\"2021-09-04T04:05:17+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=\"3 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"M\u1eb9o v\u1edbi @font-face: \u0111\u1ecbnh ngh\u0129a font-weight v\u00e0 font-style \u0111\u1ec3 gi\u1eef CSS c\u1ee7a b\u1ea1n \u0111\u01a1n gi\u1ea3n h\u01a1n &#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\/meo-voi-font-face\/","og_locale":"vi_VN","og_type":"article","og_title":"M\u1eb9o v\u1edbi @font-face: \u0111\u1ecbnh ngh\u0129a font-weight v\u00e0 font-style \u0111\u1ec3 gi\u1eef CSS c\u1ee7a b\u1ea1n \u0111\u01a1n gi\u1ea3n h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Khi ch\u00fang ta s\u1eed d\u1ee5ng @font-face \u0111\u1ec3 nh\u00fang font v\u00e0o website, m\u00e0 b\u1ea3n th\u00e2n font \u0111\u00f3 c\u00f3 m\u1ed9t s\u1ed1 weight (\u0111\u1ed9 \u0111\u1eadm nh\u1ea1t, light, bold,&#8230;) v\u00e0 style (nghi\u00eang, italic) kh\u00e1c nhau th\u00ec CSS c\u1ee7a b\u1ea1n c\u00f3 th\u1ec3 tr\u00f4ng r\u1ed1i n\u1ebfu b\u1ea1n kh\u00f4ng \u0111\u1ecbnh ngh\u0129a nh\u1eefng weight v\u00e0 style n\u00e0y trong khai b\u00e1o (declarations) c\u1ee7a @font-face. &hellip;","og_url":"https:\/\/kiencang.net\/meo-voi-font-face\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-09-04T04:05:17+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":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/meo-voi-font-face\/","url":"https:\/\/kiencang.net\/meo-voi-font-face\/","name":"M\u1eb9o v\u1edbi @font-face: \u0111\u1ecbnh ngh\u0129a font-weight v\u00e0 font-style \u0111\u1ec3 gi\u1eef CSS c\u1ee7a b\u1ea1n \u0111\u01a1n gi\u1ea3n h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-09-04T04:05:17+00:00","dateModified":"2021-09-04T04:05:17+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/meo-voi-font-face\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/meo-voi-font-face\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/meo-voi-font-face\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"M\u1eb9o v\u1edbi @font-face: \u0111\u1ecbnh ngh\u0129a font-weight v\u00e0 font-style \u0111\u1ec3 gi\u1eef CSS c\u1ee7a b\u1ea1n \u0111\u01a1n gi\u1ea3n h\u01a1n"}]},{"@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\/14491"}],"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=14491"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14491\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}