{"id":6483,"date":"2026-06-15T17:00:07","date_gmt":"2026-06-15T13:30:07","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6483"},"modified":"2026-06-15T17:00:07","modified_gmt":"2026-06-15T13:30:07","slug":"%d9%81%d9%88%d9%86%d8%aa%d9%87%d8%a7%db%8c-%d9%85%d8%aa%d8%ba%db%8c%d8%b1-variable-fonts-%d8%af%d8%b1-%d9%88%d8%a8-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-css","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d9%81%d9%88%d9%86%d8%aa%d9%87%d8%a7%db%8c-%d9%85%d8%aa%d8%ba%db%8c%d8%b1-variable-fonts-%d8%af%d8%b1-%d9%88%d8%a8-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-css\/","title":{"rendered":"\u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631 (Variable Fonts) \u062f\u0631 \u0648\u0628 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS"},"content":{"rendered":"<p data-start=\"59\" data-end=\"428\">\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0641\u0648\u0646\u062a (Font Variations) \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f OpenType \u0645\u0639\u0631\u0641\u06cc \u0634\u062f\u0647\u200c\u0627\u0646\u062f. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0641\u0648\u0646\u062a \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0686\u0646\u062f\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0648 \u062d\u0627\u0644\u062a \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u06cc\u06a9 \u0641\u0648\u0646\u062a \u0631\u0627 \u062f\u0631\u0648\u0646 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0648\u0627\u062d\u062f \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0622\u0646 <strong data-start=\"296\" data-end=\"326\">\u0641\u0648\u0646\u062a \u0645\u062a\u063a\u06cc\u0631 (Variable Font)<\/strong> \u06af\u0641\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062a\u0646\u0647\u0627 \u0628\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0641\u0648\u0646\u062a\u060c \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 \u0647\u0645\u0627\u0646 \u0641\u0648\u0646\u062a \u0631\u0627 \u062f\u0631 \u0648\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n<p data-start=\"430\" data-end=\"705\">\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc \u062f\u0631 \u062d\u062c\u0645 \u062f\u0627\u062f\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u062a\u0646 \u0628\u0627\u06cc\u062f \u062f\u0627\u0646\u0644\u0648\u062f \u0634\u0648\u062f\u060c \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0633\u0627\u0632\u06cc \u06cc\u0627 \u0627\u06cc\u062c\u0627\u062f \u062a\u0631\u0646\u0632\u06cc\u0634\u0646 \u0628\u06cc\u0646 \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0641\u0648\u0646\u062a \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u061b \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u0639\u0645\u0648\u0644\u06cc (Static Fonts) \u0627\u0645\u06a9\u0627\u0646\u200c\u067e\u0630\u06cc\u0631 \u0646\u06cc\u0633\u062a\u0646\u062f.<\/p>\n<p data-start=\"707\" data-end=\"815\">\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0686\u0646\u062f \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0633\u067e\u0633 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u062f\u0631 \u0648\u0628 \u0631\u0627 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n<hr data-start=\"817\" data-end=\"820\" \/>\n<h2 data-section-id=\"k8n6aj\" data-start=\"822\" data-end=\"853\">\u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631<\/h2>\n<blockquote data-start=\"855\" data-end=\"956\">\n<p data-start=\"857\" data-end=\"956\">\u062a\u0648\u062c\u0647: \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0635\u062d\u06cc\u062d \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0628\u0627\u06cc\u062f \u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 Variable Fonts \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06a9\u0646\u062f.<\/p>\n<\/blockquote>\n<h3 data-section-id=\"1dpmf02\" data-start=\"958\" data-end=\"982\">Source Sans Variable<\/h3>\n<p data-start=\"984\" data-end=\"1182\">\u0641\u0648\u0646\u062a <strong data-start=\"989\" data-end=\"1004\">Source Sans<\/strong> \u06cc\u06a9\u06cc \u0627\u0632 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646 \u0648 \u0645\u062d\u0628\u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0646\u0633\u062e\u0647 \u0645\u062a\u063a\u06cc\u0631 \u0622\u0646 \u0646\u06cc\u0632 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u0628\u0627 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0645\u0627\u0648\u0633 \u0631\u0648\u06cc \u0645\u062a\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0631\u062f \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 <code data-start=\"1143\" data-end=\"1156\">font-weight<\/code> \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0646\u0631\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p data-start=\"1184\" data-end=\"1224\">\u0627\u06cc\u0646 \u0631\u0641\u062a\u0627\u0631 \u0628\u0627 CSS \u0632\u06cc\u0631 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">@font-face<\/span> {\r\n  font-family: <span class=\"\u037cz\">'Source Sans'<\/span>;\r\n  src: <span class=\"\u037cy\">url<\/span>(<span class=\"\u037cz\">'\/assets\/fonts\/variable\/SourceSansVariable-Roman.ttf'<\/span>) <span class=\"\u037cv\">format<\/span>(<span class=\"\u037cz\">\"truetype-variations\"<\/span>);\r\n  font-weight: <span class=\"\u037cy\">1<\/span> <span class=\"\u037cy\">999<\/span>;\r\n}\r\n\r\n.<span class=\"\u037c10\">source-sans<\/span>,\r\n.<span class=\"\u037c10\">source-sans2<\/span>,\r\n.<span class=\"\u037c10\">source-sans3<\/span> {\r\n  font-family: <span class=\"\u037cz\">'Source Sans'<\/span>;\r\n  transition: <span class=\"\u037cy\">font-weight<\/span> <span class=\"\u037cy\">.45<\/span><span class=\"\u037cv\">s<\/span> <span class=\"\u037cy\">ease-out<\/span>;\r\n}\r\n\r\n.<span class=\"\u037c10\">source-sans<\/span>:<span class=\"\u037c10\">hover<\/span>,\r\n.<span class=\"\u037c10\">source-sans2<\/span>:<span class=\"\u037c10\">hover<\/span> {\r\n  font-weight: <span class=\"\u037cy\">999<\/span>;\r\n}\r\n\r\n.<span class=\"\u037c10\">source-sans3<\/span>:<span class=\"\u037c10\">hover<\/span> {\r\n  font-weight: <span class=\"\u037cy\">200<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"1631\" data-end=\"1634\" \/>\n<h3 data-section-id=\"3s3oha\" data-start=\"1636\" data-end=\"1662\">\u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0641\u0648\u0646\u062a<\/h3>\n<p data-start=\"1664\" data-end=\"1847\">\u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0627\u0632 \u0641\u0648\u0646\u062a <strong data-start=\"1684\" data-end=\"1695\">Decovar<\/strong> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0641\u0648\u0646\u062a \u06cc\u06a9 Variable Font \u0627\u0633\u062a \u06a9\u0647 \u0645\u062d\u0648\u0631\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc (Custom Axes) \u0645\u062a\u0639\u062f\u062f\u06cc \u062f\u0627\u0631\u062f \u0648 \u0627\u0645\u06a9\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631\u0628\u0647\u200c\u0641\u0631\u062f \u0648 \u062e\u0644\u0627\u0642\u0627\u0646\u0647 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p data-start=\"1849\" data-end=\"1879\">CSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">@font-face<\/span> {\r\n  font-family: <span class=\"\u037cy\">Decovar<\/span>;\r\n  src: <span class=\"\u037cy\">url<\/span>(<span class=\"\u037cz\">'\/assets\/fonts\/variable\/DecovarAlpha-VF.subset.ttf'<\/span>) <span class=\"\u037cv\">format<\/span>(<span class=\"\u037cz\">\"truetype-variations\"<\/span>);\r\n}\r\n\r\n.<span class=\"\u037c10\">decovar<\/span>,\r\n.<span class=\"\u037c10\">decovar2<\/span>,\r\n.<span class=\"\u037c10\">decovar3<\/span> {\r\n  font-family: <span class=\"\u037cy\">Decovar<\/span>;\r\n}\r\n\r\n.<span class=\"\u037c10\">decovar<\/span> {\r\n  color: <span class=\"\u037cv\">var<\/span>(<span class=\"\u037c11\">--green3<\/span>);\r\n  font-variation-settings: <span class=\"\u037cz\">\"BLDA\"<\/span> <span class=\"\u037cy\">506.944<\/span>, <span class=\"\u037cz\">\"TRMC\"<\/span> <span class=\"\u037cy\">1000<\/span>, <span class=\"\u037cz\">\"TRMK\"<\/span> <span class=\"\u037cy\">324.653<\/span>;\r\n}\r\n\r\n.<span class=\"\u037c10\">decovar2<\/span> {\r\n  color: <span class=\"\u037cy\">hotpink<\/span>;\r\n  font-variation-settings: <span class=\"\u037cz\">\"WMX2\"<\/span> <span class=\"\u037cy\">580.838<\/span>, <span class=\"\u037cz\">\"TRMB\"<\/span> <span class=\"\u037cy\">1000<\/span>;\r\n}\r\n\r\n.<span class=\"\u037c10\">decovar3<\/span> {\r\n  color: <span class=\"\u037cy\">rebeccapurple<\/span>;\r\n  font-variation-settings: <span class=\"\u037cz\">\"TRMF\"<\/span> <span class=\"\u037cy\">159.18<\/span>, <span class=\"\u037cz\">\"TRME\"<\/span> <span class=\"\u037cy\">1000<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2380\" data-end=\"2471\">\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0686\u0646\u062f \u0646\u0645\u0648\u0646\u0647 \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645\u060c \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u0628\u0627 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0635\u0644\u06cc Variable Fonts \u0622\u0634\u0646\u0627 \u0634\u0648\u06cc\u0645.<\/p>\n<hr data-start=\"2473\" data-end=\"2476\" \/>\n<h2 data-section-id=\"1i91buo\" data-start=\"2478\" data-end=\"2505\">\u0645\u062d\u0648\u0631\u0647\u0627\u06cc \u0641\u0648\u0646\u062a (Font Axes)<\/h2>\n<p data-start=\"2507\" data-end=\"2614\">\u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u062d\u0648\u0631\u0647\u0627\u06cc\u06cc \u0628\u0647 \u0646\u0627\u0645 <strong data-start=\"2561\" data-end=\"2569\">Axes<\/strong> \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u067e\u0646\u062c \u0645\u062d\u0648\u0631 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/p>\n<h3 data-section-id=\"yoah92\" data-start=\"2616\" data-end=\"2624\">ital<\/h3>\n<p data-start=\"2625\" data-end=\"2659\">\u06a9\u0646\u062a\u0631\u0644\u200c\u06a9\u0646\u0646\u062f\u0647 \u062d\u0627\u0644\u062a \u0627\u06cc\u062a\u0627\u0644\u06cc\u06a9 \u0641\u0648\u0646\u062a \u0627\u0633\u062a.<\/p>\n<p data-start=\"2661\" data-end=\"2701\">\u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0648\u06cc\u0698\u06af\u06cc \u0632\u06cc\u0631 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">font-style<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-section-id=\"yo8xg0\" data-start=\"2726\" data-end=\"2734\">opsz<\/h3>\n<p data-start=\"2735\" data-end=\"2771\">\u0627\u0646\u062f\u0627\u0632\u0647 \u0627\u067e\u062a\u06cc\u06a9\u0627\u0644 \u0641\u0648\u0646\u062a \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">font-optical-sizing<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-section-id=\"yohwdf\" data-start=\"2805\" data-end=\"2813\">slnt<\/h3>\n<p data-start=\"2814\" data-end=\"2845\">\u0645\u06cc\u0632\u0627\u0646 \u0634\u06cc\u0628 \u0641\u0648\u0646\u062a \u0631\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">font-style<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-section-id=\"yoet0q\" data-start=\"2870\" data-end=\"2878\">wght<\/h3>\n<p data-start=\"2879\" data-end=\"2904\">\u0648\u0632\u0646 \u0641\u0648\u0646\u062a \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">font-weight<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-section-id=\"yoet49\" data-start=\"2930\" data-end=\"2938\">wdth<\/h3>\n<p data-start=\"2939\" data-end=\"2964\">\u0639\u0631\u0636 \u0641\u0648\u0646\u062a \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">font-stretch<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2991\" data-end=\"2994\" \/>\n<p data-start=\"2996\" data-end=\"3207\">\u0641\u0648\u0646\u062a\u200c\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646 \u0645\u062d\u0648\u0631\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u060c \u0645\u062d\u0648\u0631\u0647\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0646\u06cc\u0632 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f. \u0646\u0627\u0645 \u0627\u06cc\u0646 \u0645\u062d\u0648\u0631\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627\u06cc\u062f \u0627\u0632 \u0686\u0647\u0627\u0631 \u062d\u0631\u0641 \u0628\u0632\u0631\u06af \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f\u061b \u0628\u0631\u062e\u0644\u0627\u0641 \u0645\u062d\u0648\u0631\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627 \u0686\u0647\u0627\u0631 \u062d\u0631\u0641 \u06a9\u0648\u0686\u06a9 \u0646\u0648\u0634\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<p data-start=\"3209\" data-end=\"3300\">\u0641\u0648\u0646\u062a Decovar \u06a9\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0642\u0628\u0644 \u062f\u06cc\u062f\u06cc\u0645\u060c \u0646\u0645\u0648\u0646\u0647 \u062e\u0648\u0628\u06cc \u0627\u0632 \u0641\u0648\u0646\u062a\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062a\u0639\u062f\u0627\u062f \u0632\u06cc\u0627\u062f\u06cc \u0645\u062d\u0648\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<hr data-start=\"3302\" data-end=\"3305\" \/>\n<h2 data-section-id=\"15lg1bb\" data-start=\"3307\" data-end=\"3344\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 font-variation-settings<\/h2>\n<p data-start=\"3346\" data-end=\"3469\">\u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0645\u062d\u0648\u0631\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u062d\u0648\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0648\u06cc\u0698\u06af\u06cc CSS \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0646\u062f\u0627\u0631\u0646\u062f\u060c \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc <code data-start=\"3428\" data-end=\"3453\">font-variation-settings<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p data-start=\"3471\" data-end=\"3476\">\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">h1<\/span> {\r\n  font-variation-settings:\r\n    <span class=\"\u037cz\">\"BASE\"<\/span> <span class=\"\u037cy\">500<\/span>,\r\n    <span class=\"\u037cz\">\"SPAC\"<\/span> <span class=\"\u037cy\">200<\/span>,\r\n    <span class=\"\u037cz\">\"wght\"<\/span> <span class=\"\u037cy\">322<\/span>,\r\n    <span class=\"\u037cz\">\"HEIG\"<\/span> <span class=\"\u037cy\">456<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3588\" data-end=\"3627\">\u0647\u0645\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0646\u06cc\u0632 \u0646\u0648\u0634\u062a:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">h1<\/span> {\r\n  font-weight: <span class=\"\u037cy\">322<\/span>;\r\n\r\n  font-variation-settings:\r\n    <span class=\"\u037cz\">\"BASE\"<\/span> <span class=\"\u037cy\">500<\/span>,\r\n    <span class=\"\u037cz\">\"SPAC\"<\/span> <span class=\"\u037cy\">200<\/span>,\r\n    <span class=\"\u037cz\">\"HEIG\"<\/span> <span class=\"\u037cy\">456<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3744\" data-end=\"3836\">\u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u0645\u062d\u0648\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0648\u06cc\u0698\u06af\u06cc CSS \u0645\u062e\u0635\u0648\u0635 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u0646\u062f\u060c \u0627\u0632 \u0647\u0645\u0627\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n<hr data-start=\"3838\" data-end=\"3841\" \/>\n<h3 data-section-id=\"15oox37\" data-start=\"3843\" data-end=\"3855\">\u0646\u06a9\u062a\u0647 \u0645\u0647\u0645<\/h3>\n<p data-start=\"3857\" data-end=\"4003\">\u062a\u0645\u0627\u0645 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631 \u0644\u0632\u0648\u0645\u0627\u064b \u0627\u0632 \u0647\u0631 \u06f5 \u0645\u062d\u0648\u0631 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u0637\u0644\u0627\u0639 \u0627\u0632 \u0645\u062d\u0648\u0631\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0628\u0627\u06cc\u062f \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0641\u0648\u0646\u062a \u0645\u0648\u0631\u062f\u0646\u0638\u0631 \u0631\u0627 \u0645\u0637\u0627\u0644\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"4005\" data-end=\"4174\">\u0647\u0645\u0686\u0646\u06cc\u0646 \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u062f\u0631 Variable Fonts \u0645\u0642\u062f\u0627\u0631 <code data-start=\"4056\" data-end=\"4069\">font-weight<\/code> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0647\u0631 \u0639\u062f\u062f\u06cc \u0628\u06cc\u0646 <strong data-start=\"4091\" data-end=\"4103\">1 \u062a\u0627 999<\/strong> \u0628\u0627\u0634\u062f\u061b \u0628\u0631\u062e\u0644\u0627\u0641 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0646\u062a\u06cc \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0627\u0632 \u0645\u0636\u0631\u0628\u200c\u0647\u0627\u06cc 100 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<hr data-start=\"4176\" data-end=\"4179\" \/>\n<h2 data-section-id=\"31nufq\" data-start=\"4181\" data-end=\"4223\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Variable Fonts \u0628\u0627 @font-face<\/h2>\n<p data-start=\"4225\" data-end=\"4303\">\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 \u0648\u0628 \u0628\u0627\u06cc\u062f \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0627 <code data-start=\"4279\" data-end=\"4291\">@font-face<\/code> \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"4305\" data-end=\"4513\">\u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062f\u0648 \u0646\u0633\u062e\u0647 \u0627\u0632 \u0641\u0648\u0646\u062a Source Sans \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a\u061b \u06cc\u06a9\u06cc \u0645\u0639\u0645\u0648\u0644\u06cc \u0648 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0648\u0644\u062f. \u0647\u0631 \u062f\u0648 \u0627\u0632 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 Variable Font \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0639\u062f\u0645 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0639\u0645\u0648\u0644\u06cc \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">@font-face<\/span> {\r\n  font-family: <span class=\"\u037cz\">'Source Sans'<\/span>;\r\n  src: <span class=\"\u037cy\">url<\/span>(<span class=\"\u037cz\">'\/path\/to\/SourceSansVariable.woff2'<\/span>) <span class=\"\u037cv\">format<\/span>(<span class=\"\u037cz\">\"woff2-variations\"<\/span>);\r\n  src: <span class=\"\u037cy\">url<\/span>(<span class=\"\u037cz\">'\/path\/to\/SourceSans.woff2'<\/span>) <span class=\"\u037cv\">format<\/span>(<span class=\"\u037cz\">\"woff2\"<\/span>);\r\n  font-weight: <span class=\"\u037cy\">400<\/span>;\r\n}\r\n\r\n<span class=\"\u037cv\">@font-face<\/span> {\r\n  font-family: <span class=\"\u037cz\">'Source Sans'<\/span>;\r\n  src: <span class=\"\u037cy\">url<\/span>(<span class=\"\u037cz\">'\/path\/to\/SourceSansVariable.woff2'<\/span>) <span class=\"\u037cv\">format<\/span>(<span class=\"\u037cz\">\"woff2-variations\"<\/span>);\r\n  src: <span class=\"\u037cy\">url<\/span>(<span class=\"\u037cz\">'\/path\/to\/SourceSansBold.woff2'<\/span>) <span class=\"\u037cv\">format<\/span>(<span class=\"\u037cz\">\"woff2\"<\/span>);\r\n  font-weight: <span class=\"\u037cy\">900<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4928\" data-end=\"4944\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0648\u0646\u062a:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037c13\">h1<\/span> {\r\n  font-family: <span class=\"\u037cz\">'Source Sans'<\/span>;\r\n  font-weight: <span class=\"\u037cy\">900<\/span>;\r\n}\r\n\r\n<span class=\"\u037c13\">h2<\/span> {\r\n  font-family: <span class=\"\u037cz\">'Source Sans'<\/span>;\r\n  font-weight: <span class=\"\u037cy\">400<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"5073\" data-end=\"5076\" \/>\n<h3 data-section-id=\"sjzgj3\" data-start=\"5078\" data-end=\"5096\">\u062a\u0639\u0631\u06cc\u0641 \u0628\u0627\u0632\u0647 \u0648\u0632\u0646<\/h3>\n<p data-start=\"5098\" data-end=\"5156\">\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627\u0632\u0647 \u06a9\u0627\u0645\u0644 \u0648\u0632\u0646\u200c\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u0646\u06cc\u0632 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"relative h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"\">\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cs \u037c16\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cv\">@font-face<\/span> {\r\n  font-family: <span class=\"\u037cz\">'Source Sans'<\/span>;\r\n  src: <span class=\"\u037cy\">url<\/span>(<span class=\"\u037cz\">'\/path\/to\/SourceSansVariable.woff2'<\/span>) <span class=\"\u037cv\">format<\/span>(<span class=\"\u037cz\">\"woff2-variations\"<\/span>);\r\n  src: <span class=\"\u037cy\">url<\/span>(<span class=\"\u037cz\">'\/path\/to\/SourceSans.woff2'<\/span>) <span class=\"\u037cv\">format<\/span>(<span class=\"\u037cz\">\"woff2\"<\/span>);\r\n  font-weight: <span class=\"\u037cy\">1<\/span> <span class=\"\u037cy\">999<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"5370\" data-end=\"5446\">\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0647\u0631 \u0645\u0642\u062f\u0627\u0631 \u0628\u06cc\u0646 1 \u062a\u0627 999 \u0628\u0631\u0627\u06cc <code data-start=\"5420\" data-end=\"5433\">font-weight<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n<p data-start=\"5448\" data-end=\"5534\">\u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 Variable Fonts \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0645\u0642\u062f\u0627\u0631 <code data-start=\"5505\" data-end=\"5513\">normal<\/code> \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u062e\u0648\u0627\u0647\u0646\u062f \u06a9\u0631\u062f.<\/p>\n<hr data-start=\"5536\" data-end=\"5539\" \/>\n<h2 data-section-id=\"3m88i6\" data-start=\"5541\" data-end=\"5564\">\u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631 \u0645\u0648\u062c\u0648\u062f<\/h2>\n<p data-start=\"5566\" data-end=\"5650\">\u0628\u06cc\u0634\u062a\u0631 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u062a\u063a\u06cc\u0631 \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0633\u0627\u06cc\u062a V-Fonts.com \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"5652\" data-end=\"5675\">\u0686\u0646\u062f \u0641\u0648\u0646\u062a \u0645\u062a\u0646\u200c\u0628\u0627\u0632 \u0645\u062d\u0628\u0648\u0628:<\/p>\n<ul data-start=\"5677\" data-end=\"5737\">\n<li data-section-id=\"1vo9sdp\" data-start=\"5677\" data-end=\"5685\">Barlow<\/li>\n<li data-section-id=\"efut2r\" data-start=\"5686\" data-end=\"5700\">Mutador Sans<\/li>\n<li data-section-id=\"ixuvzu\" data-start=\"5701\" data-end=\"5714\">Source Sans<\/li>\n<li data-section-id=\"19fiovj\" data-start=\"5715\" data-end=\"5726\">Amstelvar<\/li>\n<li data-section-id=\"p8cwe7\" data-start=\"5727\" data-end=\"5737\">Cabin VF<\/li>\n<\/ul>\n<p data-start=\"5739\" data-end=\"5793\">\u0628\u0631\u062e\u06cc \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 Google Fonts \u0646\u06cc\u0632 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f.<\/p>\n<hr data-start=\"5795\" data-end=\"5798\" \/>\n<h2 data-section-id=\"ncjoyr\" data-start=\"5800\" data-end=\"5821\">\u062a\u0628\u062f\u06cc\u0644 TTF \u0628\u0647 WOFF2<\/h2>\n<p data-start=\"5823\" data-end=\"5978\">\u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0641\u0648\u0646\u062a\u200c\u0647\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 TrueType (<code data-start=\"5859\" data-end=\"5865\">.ttf<\/code>) \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u0648\u0628 \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0641\u0631\u0645\u062a <strong data-start=\"5931\" data-end=\"5940\">WOFF2<\/strong> \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062d\u062c\u0645 \u0641\u0627\u06cc\u0644 \u06a9\u0627\u0647\u0634 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f.<\/p>\n<p data-start=\"5980\" data-end=\"6039\">\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0628\u0632\u0627\u0631 <strong data-start=\"6012\" data-end=\"6025\">FontTools<\/strong> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<hr data-start=\"6041\" data-end=\"6044\" \/>\n<h2 data-section-id=\"d5cshr\" data-start=\"6046\" data-end=\"6066\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627<\/h2>\n<p data-start=\"6068\" data-end=\"6179\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0627\u0632 Variable Fonts \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628 \u0627\u0633\u062a \u0648 \u062f\u0631 \u0628\u06cc\u0634\u062a\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n<p data-start=\"6181\" data-end=\"6339\">\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u0647\u0646\u0648\u0632 \u0628\u0631\u062e\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f <strong data-start=\"6228\" data-end=\"6256\">CSS Fonts Module Level 4<\/strong> \u062f\u0631 \u062d\u0627\u0644 \u062a\u06a9\u0645\u06cc\u0644 \u0634\u062f\u0646 \u0647\u0633\u062a\u0646\u062f \u0648 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0631 \u0628\u0631\u062e\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u062a\u0641\u0627\u0648\u062a\u200c\u0647\u0627\u06cc \u062c\u0632\u0626\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<hr data-start=\"6341\" data-end=\"6344\" \/>\n<h2 data-section-id=\"1sby15k\" data-start=\"6346\" data-end=\"6370\">\u0645\u0646\u0627\u0628\u0639 \u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0641\u06cc\u062f<\/h2>\n<p data-start=\"6372\" data-end=\"6390\">\u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647 \u0628\u06cc\u0634\u062a\u0631:<\/p>\n<ul data-start=\"6392\" data-end=\"6544\">\n<li data-section-id=\"1a7m5o8\" data-start=\"6392\" data-end=\"6442\">Get Started with Variable Fonts \u2014 Richard Rutter<\/li>\n<li data-section-id=\"1tgrc4d\" data-start=\"6443\" data-end=\"6486\">Introduction to Variable Fonts on the Web<\/li>\n<li data-section-id=\"1mctmxr\" data-start=\"6487\" data-end=\"6544\">One File, Many Options: Using Variable Fonts on the Web<\/li>\n<\/ul>\n<p data-start=\"6546\" data-end=\"6563\">\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc:<\/p>\n<ul data-start=\"6565\" data-end=\"6592\">\n<li data-section-id=\"1vrwb1j\" data-start=\"6565\" data-end=\"6578\">Axis-Praxis<\/li>\n<li data-section-id=\"12uh6f0\" data-start=\"6579\" data-end=\"6592\">V-Fonts.com<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>\u0627\u0632 \u0647\u0645\u0631\u0627\u0647\u06cc \u0634\u0645\u0627 \u0628\u0627 <strong><a href=\"https:\/\/parmin.cloud\/\">\u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f<\/a><\/strong> \u0645\u062a\u0634\u06a9\u0631\u06cc\u0645.<\/p>\n<div style='text-align:center' class='yasr-auto-insert-visitor'><\/div>","protected":false},"excerpt":{"rendered":"<p>\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0641\u0648\u0646\u062a (Font Variations) \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f OpenType \u0645\u0639\u0631\u0641\u06cc \u0634\u062f\u0647\u200c\u0627\u0646\u062f. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0641\u0648\u0646\u062a \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0686\u0646\u062f\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0648 \u062d\u0627\u0644\u062a \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u06cc\u06a9 \u0641\u0648\u0646\u062a \u0631\u0627 \u062f\u0631\u0648\u0646 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0648\u0627\u062d\u062f \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0641\u0648\u0646\u062a \u0645\u062a\u063a\u06cc\u0631 (Variable Font) \u06af\u0641\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062a\u0646\u0647\u0627 \u0628\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":6485,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[67,190],"tags":[1265,1262,1263,1261,1264],"class_list":["post-6483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-67","category-programming","tag-variable-fonts--css","tag--font-variation-settings","tag-1263","tag---css","tag-1264"],"aioseo_notices":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/comments?post=6483"}],"version-history":[{"count":2,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6483\/revisions"}],"predecessor-version":[{"id":6486,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6483\/revisions\/6486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/6485"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=6483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=6483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=6483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}