{"id":333747,"date":"2022-05-27T21:00:16","date_gmt":"2022-05-27T21:00:16","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=333747"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=333747","title":{"rendered":"<span>\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0431-\u0448\u0440\u0438\u0444\u0442\u044b \u043a\u0440\u0430\u0441\u043e\u0447\u043d\u044b\u043c\u0438<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/212\/d27\/819\/212d27819c7e8b9fbbf80b46cf019306.png\" width=\"875\" height=\"525\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/212\/d27\/819\/212d27819c7e8b9fbbf80b46cf019306.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e \u043f\u0430\u043b\u0438\u0442\u0440\u0430\u0445 CSS \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043c\u043d\u043e\u0433\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438 COLRv1, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 Chrome \u0438 Edge, \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a \u0441\u0442\u0430\u0440\u0442\u0443 <a href=\"https:\/\/skillfactory.ru\/frontend-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fr_270522&amp;utm_term=lead\"><u>\u043a\u0443\u0440\u0441\u0430 \u043f\u043e Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/u><\/a>.<\/p>\n<hr\/>\n<p>\u0422\u043e\u0448\u0438 \u041e\u043c\u0430\u0433\u0430\u0440\u0438, \u0430\u0432\u0442\u043e\u0440 Arcade Game Typography, \u043f\u0438\u0448\u0435\u0442, \u0447\u0442\u043e<a href=\"https:\/\/www.instagram.com\/p\/BzIrSryBm_u\/\"> <u>\u043f\u0435\u0440\u0432\u044b\u0439<\/u><\/a> \u043c\u043d\u043e\u0433\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0439 \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0432 1982 \u0433\u043e\u0434\u0443 \u0434\u043b\u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0432\u044b\u0448\u0435\u0434\u0448\u0435\u0439 \u0438\u0433\u0440\u044b \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c Insector. \u0420\u0430\u0437\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b (\u0438\u043d\u043e\u0433\u0434\u0430 \u0438\u0445 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442<a href=\"https:\/\/ilovetypography.com\/2017\/04\/03\/the-evolution-of-chromatic-fonts\/\"> <u>\u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438<\/u><\/a>) \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0435\u0442\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0440\u0435\u0434\u043a\u043e, \u0434\u0430\u0436\u0435 \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0441 2018 \u0433\u043e\u0434\u0430<a href=\"https:\/\/caniuse.com\/colr\"> <u>\u0444\u043e\u0440\u043c\u0430\u0442 \u0448\u0440\u0438\u0444\u0442\u0430 COLR<\/u><\/a> \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043f\u043e\u043b\u043d\u0443\u044e \u043a\u0440\u043e\u0441\u0441-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443, \u0434\u0430\u0436\u0435 \u0432 Internet Explorer!<\/p>\n<p>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u0418, \u043f\u043e\u043a\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0443\u0432\u0438\u0434\u0435\u043d\u043d\u044b\u0445 \u043c\u043d\u043e\u044e \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0431\u044b\u043b\u0438, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0432\u0443\u043b\u044c\u0433\u0430\u0440\u043d\u044b\u043c\u0438, \u0445\u0440\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0437\u0430\u0431\u0430\u0432\u043d\u043e, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u0446\u0435\u043f\u043b\u044f\u044e\u0442 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.\u00a0 \u0421 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 CSS \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u043e\u0439 \u0432 \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u0430\u0445 (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e font-palette \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u043e @font-palette-values) \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 COLR \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0442\u0435\u043c, \u043d\u0430 \u0447\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0432 \u0432\u0435\u0431\u0435.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/276\/f35\/c30\/276f35c3073cfad32c275e2044f82f84.png\" width=\"875\" height=\"525\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/276\/f35\/c30\/276f35c3073cfad32c275e2044f82f84.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 COLR<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437 \u044f<a href=\"https:\/\/css-tricks.com\/it-all-started-with-emoji-color-typography-on-the-web\/\"> <u>\u043f\u0438\u0441\u0430\u043b<\/u><\/a> \u043e \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u0430\u0445 \u0432 2018 \u0433\u043e\u0434\u0443. \u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e<a href=\"https:\/\/css-tricks.com\/it-all-started-with-emoji-color-typography-on-the-web\/#browser-support\"> <u>4 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430<\/u><\/a> \u0440\u0430\u0437\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0439: OpenType-SVG, COLR, SBIX \u0438 CBDT\/CBLC. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e<a href=\"https:\/\/pixelambacht.nl\/chromacheck\/\"> <u>ChromaCheck<\/u><\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<p>Google Chrome<a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=306078#c62\"> <u>\u043e\u0442\u043c\u0435\u0442\u0438\u043b<\/u><\/a> OpenType-SVG \u043a\u0430\u043a WONTFIX. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f Chrome \u0438\u043b\u0438 Edge. SBIX \u0438 CBDT\/CBLC \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u0435\u0431\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u0438 \u043f\u0440\u0438 \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u0448\u0440\u0438\u0444\u0442\u0430 \u0440\u0430\u0437\u043c\u044b\u0432\u0430\u044e\u0442\u0441\u044f. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u2014 \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0434\u043b\u044f \u0432\u0435\u0431\u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/channel\/UC3WoiLD0b-cWCo0SOxAAo8w\"><u>\u0423\u043b\u044c\u0440\u0438\u043a\u0435 \u0420\u0430\u0443\u0448<\/u><\/a> \u0441\u043e\u0437\u0434\u0430\u043b\u0430<a href=\"https:\/\/liebefonts.com\/fonts\/liebeheide\"> <u>LiebeHeide<\/u><\/a> \u2013 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0439 \u0448\u0440\u0438\u0444\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0440\u0430\u0439\u043d\u0435 \u043f\u0440\u0430\u0432\u0434\u043e\u043f\u043e\u0434\u043e\u0431\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u043f\u0438\u0441\u044c\u043c\u043e \u0448\u0430\u0440\u0438\u043a\u043e\u0432\u043e\u0439 \u0440\u0443\u0447\u043a\u043e\u0439. \u00ab\u041c\u043e\u0435\u0439 \u0441\u0430\u043c\u043e\u0439 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0446\u0435\u043b\u044c\u044e \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u044b\u043b\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442\u00bb, \u2014 \u0441\u043a\u0430\u0437\u0430\u043b\u0430 \u043e\u043d\u0430 \u043c\u043d\u0435. \u2014 \u0412 LiebeHeide \u043c\u043d\u0435 \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u044d\u0442\u0438 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 \u0448\u0440\u0438\u0444\u0442\u0435. \u041c\u0438\u043d\u0443\u0441\u044b? \u0412\u0441\u0435 PNG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0444\u0430\u0439\u043b OTF \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u044e\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440. \u0414\u043b\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u043e \u0442\u0438\u043f\u0443 Adobe InDesign \u044d\u0442\u043e, \u043c\u043e\u0436\u0435\u0442, \u0438 \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0432\u0435\u0431\u0435 \u0442\u0430\u043a\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u00bb.<\/p>\n<p>\u0412\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0448\u0440\u0438\u0444\u0442\u044b COLR (\u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u0445 \u0447\u0430\u0449\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 COLRv0). \u0412 98-\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 Chrome (\u0438 Edge), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0448\u043b\u0430 \u0432 \u0444\u0435\u0432\u0440\u0430\u043b\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 COLRv1 \u2014 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u0430.<\/p>\n<p>\u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0432\u0437\u044f\u0442\u044b \u043d\u0430<a href=\"http:\/\/caniuse.com\/#feat=%E2%80%9Dcolr%E2%80%9D\"> <u>Caniuse<\/u><\/a>, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0427\u0438\u0441\u043b\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0432\u0435\u0440\u0441\u0438\u044e, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td colspan=\"5\">\n<p align=\"center\">\u041d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Chrome<\/p>\n<\/td>\n<td>\n<p align=\"left\">Firefox<\/p>\n<\/td>\n<td>\n<p align=\"left\">IE<\/p>\n<\/td>\n<td>\n<p align=\"left\">Edge<\/p>\n<\/td>\n<td>\n<p align=\"left\">Safari<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">71<\/p>\n<\/td>\n<td>\n<p align=\"left\">32<\/p>\n<\/td>\n<td>\n<p align=\"left\">9<\/p>\n<\/td>\n<td>\n<p align=\"left\">12<\/p>\n<\/td>\n<td>\n<p align=\"left\">11<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td colspan=\"4\">\n<p align=\"center\">\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \/ \u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Android Chrome<\/p>\n<\/td>\n<td>\n<p align=\"left\">Android Firefox<\/p>\n<\/td>\n<td>\n<p align=\"left\">Android<\/p>\n<\/td>\n<td>\n<p align=\"left\">iOS Safari<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">100<\/p>\n<\/td>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">11.0-11.2<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>COLRv0 \u0438 COLRv1<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2a5\/b82\/284\/2a5b822849ff04facce580e9b6f0ed6f.png\" alt=\"Plakato \u043e\u0442 \u0448\u0440\u0438\u0444\u0442\u043e\u043b\u0438\u0442\u0435\u0439\u043d\u043e\u0439 \u0444\u0430\u0431\u0440\u0438\u043a\u0438 Underware\" title=\"Plakato \u043e\u0442 \u0448\u0440\u0438\u0444\u0442\u043e\u043b\u0438\u0442\u0435\u0439\u043d\u043e\u0439 \u0444\u0430\u0431\u0440\u0438\u043a\u0438 Underware\" width=\"875\" height=\"394\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2a5\/b82\/284\/2a5b822849ff04facce580e9b6f0ed6f.png\"\/><figcaption>Plakato \u043e\u0442 \u0448\u0440\u0438\u0444\u0442\u043e\u043b\u0438\u0442\u0435\u0439\u043d\u043e\u0439 \u0444\u0430\u0431\u0440\u0438\u043a\u0438 Underware<\/figcaption><\/figure>\n<p>COLRv1 \u2014 \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c<a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/opentype\/spec\/\"> <u>\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430<\/u><\/a> OpenType 1.9. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c COLRv0 \u043d\u0435 \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 OpenType-SVG, \u0432 COLRv1 \u043e\u043d\u0438 \u0435\u0441\u0442\u044c, \u043f\u0440\u0438\u0447\u0451\u043c \u0431\u0435\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 COLRv0 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u0442\u043e\u043d, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a \u0432 COLRv1 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c<a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/opentype\/spec\/colr#gradients\"> <\/a>\u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0435, \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u043a\u043e\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 <a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/opentype\/spec\/colr#gradients\"><u>\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/u><\/a>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b<a href=\"https:\/\/www.w3.org\/TR\/compositing-1\/\"> <u>\u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/u><\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p>\u042d\u043a\u0441\u043f\u0435\u0440\u0442 \u043f\u043e \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0435<a href=\"https:\/\/mobile.twitter.com\/PixelAmbacht\/status\/1479401648883740681\"> <u>\u0420\u043e\u044d\u043b \u041d\u0438\u0441\u043a\u0438\u043d\u0441<\/u><\/a> \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442: \u00ab\u041a\u043e\u0433\u0434\u0430-\u0442\u043e \u044f \u0441\u0447\u0438\u0442\u0430\u043b OpenType-SVG \u043b\u0443\u0447\u0448\u0438\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c, \u0432\u0435\u0434\u044c \u043e\u043d \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041d\u043e \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u0448\u0451\u043b \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u043e\u043d \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u0435\u043d \u0434\u043b\u044f \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u0430. \u0412 \u043d\u0451\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e SVG \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u041d\u043e OpenType-SVG \u043f\u043b\u043e\u0445\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 (\u0445\u0438\u043d\u0442\u0438\u043d\u0433, \u043e\u0441\u0438 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0442. \u0434.), \u0438 \u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. \u0422\u0430\u043a \u0447\u0442\u043e \u044f \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u043d\u0430 COLR. \u041f\u043e \u0441\u0443\u0442\u0438, COLR \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u0441\u0451, \u0447\u0442\u043e \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 \u0448\u0440\u0438\u0444\u0442\u0430\u0445 OpenType. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u00ab\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u00bb \u2014 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u043e\u0438 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f. \u041f\u0440\u043e\u0441\u0442\u043e, \u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u00bb.<\/p>\n<p>COLRv1 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c \u0441 \u043e\u0441\u044f\u043c\u0438 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0438 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 COLR:<a href=\"https:\/\/djr.com\/notes\/merit-badge-font-of-the-month\/\"> <u>Merit Badge<\/u><\/a>,<a href=\"https:\/\/underware.nl\/fonts\/plakato\/features\/color\/#feature_info\"> <u>Plakato Color<\/u><\/a> \u0438<a href=\"https:\/\/www.harbortype.com\/rocher-color-making-a-variable-color-font\/\"> <u>Rocher Color<\/u><\/a>.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u044f\u0440\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442 \u0423\u043b\u044c\u0440\u0438\u043a\u0435 \u0420\u0430\u0443\u0448, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430. \u042d\u0442\u043e \u0433\u0430\u0440\u043d\u0438\u0442\u0443\u0440\u0430 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0435 \u0432\u044b\u0448\u0435\u0434\u0448\u0435\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u043e\u043d\u043e\u0432\u0443\u044e \u0432\u044b\u0432\u0435\u0441\u043a\u0443:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/698\/311\/c53\/698311c5323c5d39036363865a2e9c81.png\" width=\"875\" height=\"536\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/698\/311\/c53\/698311c5323c5d39036363865a2e9c81.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0410\u043a\u0438\u043c \u0425\u0435\u043b\u043c\u043b\u0438\u043d\u0433 \u0438\u0437 \u0448\u0440\u0438\u0444\u0442\u043e\u043b\u0438\u0442\u0435\u0439\u043d\u043e\u0439 \u0444\u0430\u0431\u0440\u0438\u043a\u0438<a href=\"http:\/\/www.underware.nl\/\"> <u>Underware<\/u><\/a> \u0432 \u0432\u043e\u0441\u0442\u043e\u0440\u0433\u0435 \u043e\u0442 COLRv1. \u041e\u043d \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043c\u043d\u0435, \u0447\u0442\u043e \u00ab\u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0444\u043e\u0440\u043c\u0430\u0442 COLRv1 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0436\u0435 (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435\u0435) \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043a\u0430\u043a \u0438 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b\u00bb. \u0414\u043b\u044f \u0410\u043a\u0438\u043c\u0430 \u044d\u0442\u043e \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u00ab\u0412\u0441\u0435 \u043f\u0440\u0435\u0436\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0431\u044b\u043b\u0438 \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u043c\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0430\u043c\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0432 \u0433\u043b\u0438\u0444\u044b. \u041a\u0442\u043e-\u0442\u043e \u0432\u0438\u0434\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 OpenType-SVG, \u043d\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043e\u043d\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0432\u044b\u043c. \u0421 \u043f\u0440\u0430\u0433\u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f, SVG \u2014 \u00ab\u0437\u0430\u043f\u0435\u0440\u0442\u0430\u044f \u043a\u043e\u043c\u043d\u0430\u0442\u0430\u00bb \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 OpenType. \u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0440\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439 SVG \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u0441 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 SVG\u00bb.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0432\u0441\u0451 \u0435\u0449\u0451 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u041f\u043e\u043a\u0430 Mozilla \u043d\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 COLRv1, \u043d\u043e \u043e\u043d\u0430<a href=\"https:\/\/mozilla.github.io\/standards-positions\/#font-colrv1\"> <u>\u0432\u043a\u043b\u044e\u0447\u0438\u043b\u0430<\/u><\/a> \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0432 \u0441\u0432\u043e\u0439 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0438 \u0437\u0430\u044f\u0432\u0438\u043b\u0430, \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u00ab\u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b OpenType-SVG \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 \u0432\u0435\u0431\u0435\u00bb. Apple \u043d\u0435 \u0442\u043e\u0440\u043e\u043f\u0438\u0442\u0441\u044f \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c COLRv1 \u0432 Safari.<\/p>\n<p>\u0428\u0440\u0438\u0444\u0442\u044b COLRv1 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0438 \u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u0432\u0441\u0435 \u0431\u0443\u043a\u0432\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0434\u043d\u043e\u0442\u043e\u043d\u043d\u044b\u043c\u0438 (\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e CSS color, \u043a\u0430\u043a \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430). \u041d\u0430\u043c \u0435\u0449\u0451 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u043c\u043d\u043e\u0433\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u043b\u0438\u0442\u0435\u0439\u043d\u044b\u0435 \u0441\u0442\u0443\u0434\u0438\u0438 \u0432\u044b\u043f\u0443\u0441\u0442\u044f\u0442 \u0448\u0440\u0438\u0444\u0442\u044b COLRv1, \u0430 \u0432\u0435\u0434\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Figma) \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0434\u0430\u0436\u0435 COLRv0. \u0418 \u0432\u0441\u0451 \u0436\u0435 \u044f \u0432\u0435\u0440\u044e \u0432 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u2014 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 \u0432\u0435\u0431\u0435. \u0417\u0430 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f COLRv1 \u0443\u0436\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438:<a href=\"https:\/\/github.com\/aliftype\/reem-kufi\"> <u>Reem Kufi<\/u><\/a> \u0438<a href=\"https:\/\/djr.com\/notes\/bradley-initials-font-of-the-month\"> <u>Bradley Initials<\/u><\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8ed\/109\/379\/8ed109379e7db513ca7e8cc2066c213f.png\" width=\"875\" height=\"422\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8ed\/109\/379\/8ed109379e7db513ca7e8cc2066c213f.png\"\/><figcaption><\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2e0\/e0b\/6ef\/2e0e0b6ef97523b8cffcb841ba0ecab9.png\" width=\"875\" height=\"403\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2e0\/e0b\/6ef\/2e0e0b6ef97523b8cffcb841ba0ecab9.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>COLR \u0438 CSS<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u0446\u0432\u0435\u0442\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c, \u0442\u043e, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430\u043c\u0438. \u0414\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CSS \u0431\u044b\u043b\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0421\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c<a href=\"https:\/\/www.w3.org\/TR\/css-fonts-4\/#propdef-font-palette\"> <u>font-palette<\/u><\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0441\u0445\u0435\u043c\u0443 \u0448\u0440\u0438\u0444\u0442\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438 COLRv0 \u0438 COLRv1. (<a href=\"https:\/\/twitter.com\/Litherum\/status\/1456309796290789376\"><u>\u041c\u0430\u0439\u043b\u0437 \u041c\u0430\u043a\u0441\u0444\u0438\u043b\u0434<\/u><\/a> \u0438\u0437 Apple \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442, \u0447\u0442\u043e \u0448\u0440\u0438\u0444\u0442\u044b SVG \u043c\u043e\u0436\u043d\u043e <em>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c <\/em>\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u043b\u0438\u0442\u0440, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a \u0432\u0441\u0435 \u0446\u0432\u0435\u0442\u0430 COLR \u0448\u0440\u0438\u0444\u0442\u043e\u0432 <em>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438<\/em> \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 CSS).<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u0443\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u2013 \u044d\u0442\u043e \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u043e. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u0437\u0430 \u043d\u0430\u0441 \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0432 \u0448\u0440\u0438\u0444\u0442\u044b. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e<a href=\"https:\/\/www.w3.org\/TR\/css-fonts-4\/#base-palette-desc\"> <u>base-palette<\/u><\/a> \u0432 CSS \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0445\u0435\u043c\u044b.<\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0432 \u0448\u0440\u0438\u0444\u0442\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430? \u042d\u0442\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442 \u0441\u0430\u0439\u0442 \u0448\u0440\u0438\u0444\u0442\u0430. \u0410 \u0435\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442, \u0442\u043e \u0435\u0441\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c<a href=\"https:\/\/wakamaifondue.com\/\"> <u>Wakamai Fondue<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0445\u0435\u043c\u044b (\u0441\u043c. \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435). \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e<a href=\"https:\/\/www.harbortype.com\/fonts\/rocher-color\/\"> <u>Rocher Color<\/u><\/a> \u2013 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u043e\u0442 Henrique Beier \u0441 \u043d\u043e\u0442\u043a\u0430\u043c\u0438 Flinstone. \u041f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 Wakamai Foundue \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 \u0448\u0440\u0438\u0444\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f 4 \u0446\u0432\u0435\u0442\u0430 \u0438 \u043e\u043d \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 11 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438 \u043f\u0430\u043b\u0438\u0442\u0440\u044b.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7b4\/d5c\/364\/7b4d5c364987cc1bf3bc2241dee9c60a.png\" width=\"489\" height=\"974\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7b4\/d5c\/364\/7b4d5c364987cc1bf3bc2241dee9c60a.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e base-palette: 0 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 Rocher \u044d\u0442\u043e \u043e\u0442\u0442\u0435\u043d\u043a\u0438 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u043e\u0433\u043e \u0438 \u043a\u043e\u0440\u0438\u0447\u043d\u0435\u0432\u043e\u0433\u043e).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/623\/d3e\/bc1\/623d3ebc11d452ed104823669f34d94a.png\" width=\"875\" height=\"205\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/623\/d3e\/bc1\/623d3ebc11d452ed104823669f34d94a.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<p>\u0427\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 base-palette: 1 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0435\u043c \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0442. \u0434. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u0434\u0430 \u044f \u0432\u044b\u0431\u0438\u0440\u0430\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043e\u0442\u0442\u0435\u043d\u043a\u0430\u043c\u0438 \u0441\u0435\u0440\u043e\u0433\u043e:<\/p>\n<pre><code class=\"css\"> @font-palette-values --Grays {   font-family: Rocher;   base-palette: 9; }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0430\u0432\u0438\u043b\u043e CSS<a href=\"https:\/\/www.w3.org\/TR\/css-fonts-4\/#font-palette-values\"> <u>@font-palette-values<\/u><\/a> \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437 font-palette:<\/p>\n<pre><code class=\"css\">.grays {   font-family: 'Rocher';   font-palette: --Grays; }<\/code><\/pre>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/629132f615db00b4622648d6\" data-style=\"\" id=\"629132f615db00b4622648d6\" width=\"\"><\/div>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0432\u0430\u043c \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c <em>\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e <\/em>\u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0430\u0448\u0438\u043c \u0444\u0438\u0440\u043c\u0435\u043d\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u0430\u043c \u0438\u043b\u0438 \u043d\u044e\u0430\u043d\u0441\u0430\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0446\u0432\u0435\u0442\u0430, \u043d\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435 base-palette.<\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043e\u0437\u044c\u043c\u0451\u043c<a href=\"https:\/\/djr.com\/bungee\/\"> <u>Bungee<\/u><\/a> \u043e\u0442 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<a href=\"https:\/\/djr.com\/\"> <u>\u0414\u044d\u0432\u0438\u0434\u0430 \u0414\u0436\u043e\u043d\u0430\u0442\u0430\u043d\u0430 \u0420\u043e\u0441\u0441\u0430<\/u><\/a>. \u0412 \u043d\u0451\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f 2 \u0446\u0432\u0435\u0442\u0430: \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0438 \u0431\u0435\u043b\u044b\u0439. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435 \u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u043e\u0431\u0430 \u0446\u0432\u0435\u0442\u0430 \u0448\u0440\u0438\u0444\u0442\u0430, \u0430 base-palette \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0435 \u0432\u0430\u0436\u043d\u0430:<\/p>\n<pre><code class=\"css\">@font-palette-values --PinkAndGray {   font-family: bungee;   override-colors:     0 #c1cbed,     1 #ff3a92; }  @font-palette-values --GrayAndPink {   font-family: bungee;   override-colors:     0 #ff3a92,     1 #c1cbed; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/13e\/346\/011\/13e346011e574c0341e7e114bae3c857.png\" width=\"875\" height=\"573\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/13e\/346\/011\/13e346011e574c0341e7e114bae3c857.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u2014 \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c base-palette, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0446\u0432\u0435\u0442\u0430. \u041d\u0438\u0436\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0441\u0435\u0440\u0443\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 Rocher, \u043d\u043e \u043c\u0435\u043d\u044f\u044e \u043e\u0434\u0438\u043d \u0446\u0432\u0435\u0442 \u043d\u0430 \u043c\u044f\u0442\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439:<\/p>\n<pre><code class=\"css\">@font-palette-values --GraysRemix {   font-family: Rocher;   base-palette: 9;   override-colors:      2 rgb(90,290,210); }  body {   font-family: \"Rocher\";   font-palette: --GraysRemix; }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 override-colors \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u043c \u0447\u0438\u0441\u043b\u043e\u043c \u043a\u0430\u043a\u043e\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0448\u0440\u0438\u0444\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0451\u043d. \u0422\u0443\u0442 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u043f\u0440\u043e\u0431 \u0438 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e6f\/054\/130\/e6f054130e08e46c200f71b2bd4feabc.png\" width=\"875\" height=\"168\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e6f\/054\/130\/e6f054130e08e46c200f71b2bd4feabc.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<p>\u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0430\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u044d\u043c\u043e\u0434\u0437\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,<a href=\"https:\/\/github.com\/mozilla\/twemoji-colr\"> <u>Twemoji<\/u><\/a> (\u0441\u043c. \u043d\u0438\u0436\u0435) \u0438\u043b\u0438 Noto. \u0412\u043e\u0442<a href=\"https:\/\/rsheeter.github.io\/recolor\"> <u>\u0437\u0430\u0431\u0430\u0432\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f<\/u><\/a> \u043e\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438\u0437 Google:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/abb\/d3e\/588\/abbd3e5883f28876a34b53de12107da7.png\" width=\"875\" height=\"486\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/abb\/d3e\/588\/abbd3e5883f28876a34b53de12107da7.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<h2>\u0422\u0435\u043a\u0443\u0449\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>\u0412\u043e\u0442 \u043e\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u0441\u043a\u043e\u0440\u0431\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439: \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 @font-palette-values\u2026 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0441\u0435\u0439\u0447\u0430\u0441. \u0422\u043e \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043d\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n<pre><code class=\"css\">@font-palette-values --PinkAndBlue {   font-family: bungee;   override-colors:     0 var(--pink),     1 var(--blue); }<\/code><\/pre>\n<p>\u0415\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 font-palette \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0418\u043d\u0430\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0432 \u0434\u0440\u0443\u0433\u0443\u044e, \u043d\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u043f\u043b\u0430\u0432\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043c\u043e\u044f \u043c\u0435\u0447\u0442\u0430 \u043e \u0431\u0440\u043e\u0441\u043a\u043e\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0448\u0440\u0438\u0444\u0442\u0435 \u044d\u043c\u043e\u0434\u0437\u0438 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043c\u0435\u0447\u0442\u043e\u0439.<\/p>\n<h3>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/h3>\n<p>font-palette \u0438 @font-palette-values \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 Safari \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 15.4. \u0412<a href=\"https:\/\/blog.chromium.org\/2022\/03\/chrome-101-federated-credential.html\"> <u>Chrome \u0438 Edge<\/u><\/a> \u043e\u043d\u0438 \u0434\u043e\u0448\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0432\u044b\u0445\u043e\u0434\u043e\u043c \u0432\u0435\u0440\u0441\u0438\u0438 101.<\/p>\n<p>\u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0432\u0437\u044f\u0442\u044b \u0441<a href=\"http:\/\/caniuse.com\/#feat=%E2%80%9Dcss-font-palette%E2%80%9D\"> <u>Caniuse<\/u><\/a>, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0427\u0438\u0441\u043b\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0432\u0435\u0440\u0441\u0438\u044e, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<p><em>\u041d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b<\/em><\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">Chrome<\/p>\n<\/td>\n<td>\n<p align=\"left\">Firefox<\/p>\n<\/td>\n<td>\n<p align=\"left\">IE<\/p>\n<\/td>\n<td>\n<p align=\"left\">Edge<\/p>\n<\/td>\n<td>\n<p align=\"left\">Safari<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">15.4<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><em>\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \/ \u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b<\/em><\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">Android Chrome<\/p>\n<\/td>\n<td>\n<p align=\"left\">Android Firefox<\/p>\n<\/td>\n<td>\n<p align=\"left\">Android<\/p>\n<\/td>\n<td>\n<p align=\"left\">iOS Safari<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">15.4<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>\u0414\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c, \u0432\u044b \u0443\u0436\u0435 \u0440\u0430\u0437\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0438 \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u041e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<h4>COLR \u0438 \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b<\/h4>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043a\u043e\u043d\u043e\u043a \u0432 \u0441\u0435\u0442\u0438 (<a href=\"https:\/\/css-tricks.com\/pretty-good-svg-icon-system\/\"><u>\u041a\u0440\u0438\u0441 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442, \u043f\u043e\u0447\u0435\u043c\u0443<\/u><\/a>), \u043d\u043e \u043e\u043d\u0438 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f.\u00a0 \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Duotone \u0441 FontAwesome \u0438\u043b\u0438 \u0434\u0432\u0443\u0445\u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u0437\u00a0 <a href=\"https:\/\/fonts.google.com\/icons?icon.style=Two+tone\"><u>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/u><\/a>) font-palette \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0bc\/aab\/eea\/0bcaabeea01467d228dcb30b03d7a8f8.png\" alt=\"\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u044d\u043c\u043e\u0434\u0437\u0438\" title=\"\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u044d\u043c\u043e\u0434\u0437\u0438\" width=\"875\" height=\"149\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0bc\/aab\/eea\/0bcaabeea01467d228dcb30b03d7a8f8.png\"\/><figcaption>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u044d\u043c\u043e\u0434\u0437\u0438<\/figcaption><\/figure>\n<p>\u00a0\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u041d\u043e\u043b\u0430\u043d \u041b\u043e\u0443\u0441\u043e\u043d \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043e<a href=\"https:\/\/nolanlawson.com\/2022\/04\/08\/the-struggle-of-using-native-emoji-on-the-web\/\"> <u>\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445<\/u><\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043c\u043e\u0434\u0437\u0438 \u0432 \u0432\u0435\u0431\u0435. \u0412<a href=\"https:\/\/developer.chrome.com\/en\/blog\/colrv1-fonts\/\"> <u>\u0431\u043b\u043e\u0433\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Chrome<\/u><\/a> \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435:<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0442\u043e \u0432\u0430\u0448\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u044d\u043c\u043e\u0434\u0437\u0438. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u2013 \u043f\u0440\u043e\u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u044d\u043c\u043e\u0434\u0437\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439 \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u043e\u0432\u044b\u0445 \u044d\u043c\u043e\u0434\u0437\u0438, \u043f\u043e\u043c\u0438\u043c\u043e \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u0417\u0430\u0442\u0435\u043c \u0432 \u0445\u043e\u0434\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0441 \u0431\u0443\u0444\u0435\u0440\u043e\u043c \u043e\u0431\u043c\u0435\u043d\u0430 \u0442\u0430\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u043e\u0432\u044c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 COLRv1 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u0443\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443, \u0442\u043e \u043e\u043d \u043c\u043e\u0433 \u0431\u044b \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0443 COLRv1 \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e: \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0447\u0451\u0442\u043a\u043e \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u044d\u043c\u043e\u0434\u0437\u0438 \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u0438 \u0440\u0430\u0437\u043c\u044b\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0414\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 \u0432\u0435\u0431\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u043b\u0430\u0441\u044c \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439 \u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u043e\u0439 \u0437\u0430\u043b\u0438\u0432\u043a\u043e\u0439 \u0447\u0435\u0440\u0435\u0437 CSS. \u0412\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0433\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0442\u0435\u043a\u0441\u0442: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0431\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430; \u043f\u043e \u043d\u0435\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0447\u0435\u0440\u0435\u0437 Command+F; \u043e\u043d \u043d\u0435 \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e, \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c Adobe Illustrator.<\/p>\n<p>\u0426\u0432\u0435\u0442\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0445 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u0432 \u0438 \u043f\u043e\u0441\u0430\u0434\u043e\u0447\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041c\u043e\u0436\u0435\u0442, \u044d\u0442\u043e \u0438 \u043d\u0435 \u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u044b \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0435\u0442\u0435, \u043d\u043e \u0442\u0430\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u043c.<\/p>\n<p>\u0410 \u043c\u044b \u043f\u043e\u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c \u0432\u0430\u0448\u0438 \u043d\u0430\u0432\u044b\u043a\u0438 \u0438\u043b\u0438 \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e, \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/frontend-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fr_270522&amp;utm_term=conc\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/python-fullstack-web-developer?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fpw_270522&amp;utm_term=conc\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Fullstack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 Python<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e <a href=\"https:\/\/skillfactory.ru\/catalogue?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=sf_allcourses_270522&amp;utm_term=conc\">\u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e<\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e1a\/f33\/4d0\/e1af334d0925323f2cc4ce47ecbc75a4.png\" width=\"1000\" height=\"200\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e1a\/f33\/4d0\/e1af334d0925323f2cc4ce47ecbc75a4.png\"\/><figcaption><\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/668298\/\"> https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/668298\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e \u043f\u0430\u043b\u0438\u0442\u0440\u0430\u0445 CSS \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043c\u043d\u043e\u0433\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438 COLRv1, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 Chrome \u0438 Edge, \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a \u0441\u0442\u0430\u0440\u0442\u0443 <a href=\"https:\/\/skillfactory.ru\/frontend-razrabotchik?utm_source=habr&amp;utm_medium=habr&amp;utm_campaign=article&amp;utm_content=coding_fr_270522&amp;utm_term=lead\"><u>\u043a\u0443\u0440\u0441\u0430 \u043f\u043e Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/u><\/a>.<\/p>\n<hr\/>\n<p>\u0422\u043e\u0448\u0438 \u041e\u043c\u0430\u0433\u0430\u0440\u0438, \u0430\u0432\u0442\u043e\u0440 Arcade Game Typography, \u043f\u0438\u0448\u0435\u0442, \u0447\u0442\u043e<a href=\"https:\/\/www.instagram.com\/p\/BzIrSryBm_u\/\"> <u>\u043f\u0435\u0440\u0432\u044b\u0439<\/u><\/a> \u043c\u043d\u043e\u0433\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0439 \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0432 1982 \u0433\u043e\u0434\u0443 \u0434\u043b\u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0432\u044b\u0448\u0435\u0434\u0448\u0435\u0439 \u0438\u0433\u0440\u044b \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c Insector. \u0420\u0430\u0437\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b (\u0438\u043d\u043e\u0433\u0434\u0430 \u0438\u0445 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442<a href=\"https:\/\/ilovetypography.com\/2017\/04\/03\/the-evolution-of-chromatic-fonts\/\"> <u>\u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438<\/u><\/a>) \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0435\u0442\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0440\u0435\u0434\u043a\u043e, \u0434\u0430\u0436\u0435 \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0441 2018 \u0433\u043e\u0434\u0430<a href=\"https:\/\/caniuse.com\/colr\"> <u>\u0444\u043e\u0440\u043c\u0430\u0442 \u0448\u0440\u0438\u0444\u0442\u0430 COLR<\/u><\/a> \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043f\u043e\u043b\u043d\u0443\u044e \u043a\u0440\u043e\u0441\u0441-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443, \u0434\u0430\u0436\u0435 \u0432 Internet Explorer!<\/p>\n<p>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u0418, \u043f\u043e\u043a\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0443\u0432\u0438\u0434\u0435\u043d\u043d\u044b\u0445 \u043c\u043d\u043e\u044e \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0431\u044b\u043b\u0438, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0432\u0443\u043b\u044c\u0433\u0430\u0440\u043d\u044b\u043c\u0438, \u0445\u0440\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0437\u0430\u0431\u0430\u0432\u043d\u043e, \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u0446\u0435\u043f\u043b\u044f\u044e\u0442 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.\u00a0 \u0421 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 CSS \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u043e\u0439 \u0432 \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u0430\u0445 (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e font-palette \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u043e @font-palette-values) \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 COLR \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0442\u0435\u043c, \u043d\u0430 \u0447\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0432 \u0432\u0435\u0431\u0435.\u00a0<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 COLR<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437 \u044f<a href=\"https:\/\/css-tricks.com\/it-all-started-with-emoji-color-typography-on-the-web\/\"> <u>\u043f\u0438\u0441\u0430\u043b<\/u><\/a> \u043e \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u0430\u0445 \u0432 2018 \u0433\u043e\u0434\u0443. \u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e<a href=\"https:\/\/css-tricks.com\/it-all-started-with-emoji-color-typography-on-the-web\/#browser-support\"> <u>4 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430<\/u><\/a> \u0440\u0430\u0437\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0439: OpenType-SVG, COLR, SBIX \u0438 CBDT\/CBLC. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e<a href=\"https:\/\/pixelambacht.nl\/chromacheck\/\"> <u>ChromaCheck<\/u><\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<p>Google Chrome<a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=306078#c62\"> <u>\u043e\u0442\u043c\u0435\u0442\u0438\u043b<\/u><\/a> OpenType-SVG \u043a\u0430\u043a WONTFIX. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f Chrome \u0438\u043b\u0438 Edge. SBIX \u0438 CBDT\/CBLC \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u0435\u0431\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u0438 \u043f\u0440\u0438 \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445 \u0448\u0440\u0438\u0444\u0442\u0430 \u0440\u0430\u0437\u043c\u044b\u0432\u0430\u044e\u0442\u0441\u044f. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u2014 \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0434\u043b\u044f \u0432\u0435\u0431\u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/channel\/UC3WoiLD0b-cWCo0SOxAAo8w\"><u>\u0423\u043b\u044c\u0440\u0438\u043a\u0435 \u0420\u0430\u0443\u0448<\/u><\/a> \u0441\u043e\u0437\u0434\u0430\u043b\u0430<a href=\"https:\/\/liebefonts.com\/fonts\/liebeheide\"> <u>LiebeHeide<\/u><\/a> \u2013 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0439 \u0448\u0440\u0438\u0444\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0440\u0430\u0439\u043d\u0435 \u043f\u0440\u0430\u0432\u0434\u043e\u043f\u043e\u0434\u043e\u0431\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u043f\u0438\u0441\u044c\u043c\u043e \u0448\u0430\u0440\u0438\u043a\u043e\u0432\u043e\u0439 \u0440\u0443\u0447\u043a\u043e\u0439. \u00ab\u041c\u043e\u0435\u0439 \u0441\u0430\u043c\u043e\u0439 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0446\u0435\u043b\u044c\u044e \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u044b\u043b\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442\u00bb, \u2014 \u0441\u043a\u0430\u0437\u0430\u043b\u0430 \u043e\u043d\u0430 \u043c\u043d\u0435. \u2014 \u0412 LiebeHeide \u043c\u043d\u0435 \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u044d\u0442\u0438 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 \u0448\u0440\u0438\u0444\u0442\u0435. \u041c\u0438\u043d\u0443\u0441\u044b? \u0412\u0441\u0435 PNG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0444\u0430\u0439\u043b OTF \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u044e\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440. \u0414\u043b\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u043e \u0442\u0438\u043f\u0443 Adobe InDesign \u044d\u0442\u043e, \u043c\u043e\u0436\u0435\u0442, \u0438 \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0432\u0435\u0431\u0435 \u0442\u0430\u043a\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u00bb.<\/p>\n<p>\u0412\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0448\u0440\u0438\u0444\u0442\u044b COLR (\u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u0445 \u0447\u0430\u0449\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 COLRv0). \u0412 98-\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 Chrome (\u0438 Edge), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0448\u043b\u0430 \u0432 \u0444\u0435\u0432\u0440\u0430\u043b\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 COLRv1 \u2014 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u0430.<\/p>\n<p>\u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0432\u0437\u044f\u0442\u044b \u043d\u0430<a href=\"http:\/\/caniuse.com\/#feat=%E2%80%9Dcolr%E2%80%9D\"> <u>Caniuse<\/u><\/a>, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0427\u0438\u0441\u043b\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0432\u0435\u0440\u0441\u0438\u044e, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td colspan=\"5\">\n<p align=\"center\">\u041d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Chrome<\/p>\n<\/td>\n<td>\n<p align=\"left\">Firefox<\/p>\n<\/td>\n<td>\n<p align=\"left\">IE<\/p>\n<\/td>\n<td>\n<p align=\"left\">Edge<\/p>\n<\/td>\n<td>\n<p align=\"left\">Safari<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">71<\/p>\n<\/td>\n<td>\n<p align=\"left\">32<\/p>\n<\/td>\n<td>\n<p align=\"left\">9<\/p>\n<\/td>\n<td>\n<p align=\"left\">12<\/p>\n<\/td>\n<td>\n<p align=\"left\">11<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td colspan=\"4\">\n<p align=\"center\">\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \/ \u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Android Chrome<\/p>\n<\/td>\n<td>\n<p align=\"left\">Android Firefox<\/p>\n<\/td>\n<td>\n<p align=\"left\">Android<\/p>\n<\/td>\n<td>\n<p align=\"left\">iOS Safari<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">100<\/p>\n<\/td>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">11.0-11.2<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>COLRv0 \u0438 COLRv1<\/h2>\n<figure class=\"full-width\"><figcaption>Plakato \u043e\u0442 \u0448\u0440\u0438\u0444\u0442\u043e\u043b\u0438\u0442\u0435\u0439\u043d\u043e\u0439 \u0444\u0430\u0431\u0440\u0438\u043a\u0438 Underware<\/figcaption><\/figure>\n<p>COLRv1 \u2014 \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c<a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/opentype\/spec\/\"> <u>\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430<\/u><\/a> OpenType 1.9. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c COLRv0 \u043d\u0435 \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 OpenType-SVG, \u0432 COLRv1 \u043e\u043d\u0438 \u0435\u0441\u0442\u044c, \u043f\u0440\u0438\u0447\u0451\u043c \u0431\u0435\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 COLRv0 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u0442\u043e\u043d, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a \u0432 COLRv1 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c<a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/opentype\/spec\/colr#gradients\"> <\/a>\u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0435, \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u043a\u043e\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 <a href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/opentype\/spec\/colr#gradients\"><u>\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/u><\/a>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b<a href=\"https:\/\/www.w3.org\/TR\/compositing-1\/\"> <u>\u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/u><\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p>\u042d\u043a\u0441\u043f\u0435\u0440\u0442 \u043f\u043e \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0435<a href=\"https:\/\/mobile.twitter.com\/PixelAmbacht\/status\/1479401648883740681\"> <u>\u0420\u043e\u044d\u043b \u041d\u0438\u0441\u043a\u0438\u043d\u0441<\/u><\/a> \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442: \u00ab\u041a\u043e\u0433\u0434\u0430-\u0442\u043e \u044f \u0441\u0447\u0438\u0442\u0430\u043b OpenType-SVG \u043b\u0443\u0447\u0448\u0438\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c, \u0432\u0435\u0434\u044c \u043e\u043d \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041d\u043e \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u0448\u0451\u043b \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u043e\u043d \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u0435\u043d \u0434\u043b\u044f \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u0430. \u0412 \u043d\u0451\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e SVG \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u041d\u043e OpenType-SVG \u043f\u043b\u043e\u0445\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 (\u0445\u0438\u043d\u0442\u0438\u043d\u0433, \u043e\u0441\u0438 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0442. \u0434.), \u0438 \u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. \u0422\u0430\u043a \u0447\u0442\u043e \u044f \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u043d\u0430 COLR. \u041f\u043e \u0441\u0443\u0442\u0438, COLR \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u0441\u0451, \u0447\u0442\u043e \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 \u0448\u0440\u0438\u0444\u0442\u0430\u0445 OpenType. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u00ab\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u00bb \u2014 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u043e\u0438 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u043e\u044f. \u041f\u0440\u043e\u0441\u0442\u043e, \u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u00bb.<\/p>\n<p>COLRv1 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c \u0441 \u043e\u0441\u044f\u043c\u0438 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0438 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 COLR:<a href=\"https:\/\/djr.com\/notes\/merit-badge-font-of-the-month\/\"> <u>Merit Badge<\/u><\/a>,<a href=\"https:\/\/underware.nl\/fonts\/plakato\/features\/color\/#feature_info\"> <u>Plakato Color<\/u><\/a> \u0438<a href=\"https:\/\/www.harbortype.com\/rocher-color-making-a-variable-color-font\/\"> <u>Rocher Color<\/u><\/a>.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u044f\u0440\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442 \u0423\u043b\u044c\u0440\u0438\u043a\u0435 \u0420\u0430\u0443\u0448, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430. \u042d\u0442\u043e \u0433\u0430\u0440\u043d\u0438\u0442\u0443\u0440\u0430 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0435 \u0432\u044b\u0448\u0435\u0434\u0448\u0435\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u043e\u043d\u043e\u0432\u0443\u044e \u0432\u044b\u0432\u0435\u0441\u043a\u0443:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0410\u043a\u0438\u043c \u0425\u0435\u043b\u043c\u043b\u0438\u043d\u0433 \u0438\u0437 \u0448\u0440\u0438\u0444\u0442\u043e\u043b\u0438\u0442\u0435\u0439\u043d\u043e\u0439 \u0444\u0430\u0431\u0440\u0438\u043a\u0438<a href=\"http:\/\/www.underware.nl\/\"> <u>Underware<\/u><\/a> \u0432 \u0432\u043e\u0441\u0442\u043e\u0440\u0433\u0435 \u043e\u0442 COLRv1. \u041e\u043d \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043c\u043d\u0435, \u0447\u0442\u043e \u00ab\u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0444\u043e\u0440\u043c\u0430\u0442 COLRv1 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0436\u0435 (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435\u0435) \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043a\u0430\u043a \u0438 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b\u00bb. \u0414\u043b\u044f \u0410\u043a\u0438\u043c\u0430 \u044d\u0442\u043e \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u00ab\u0412\u0441\u0435 \u043f\u0440\u0435\u0436\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0431\u044b\u043b\u0438 \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u043c\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0430\u043c\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0432 \u0433\u043b\u0438\u0444\u044b. \u041a\u0442\u043e-\u0442\u043e \u0432\u0438\u0434\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 OpenType-SVG, \u043d\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043e\u043d\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0432\u044b\u043c. \u0421 \u043f\u0440\u0430\u0433\u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f, SVG \u2014 \u00ab\u0437\u0430\u043f\u0435\u0440\u0442\u0430\u044f \u043a\u043e\u043c\u043d\u0430\u0442\u0430\u00bb \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 OpenType. \u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0440\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439 SVG \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u0441 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 SVG\u00bb.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0432\u0441\u0451 \u0435\u0449\u0451 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u041f\u043e\u043a\u0430 Mozilla \u043d\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 COLRv1, \u043d\u043e \u043e\u043d\u0430<a href=\"https:\/\/mozilla.github.io\/standards-positions\/#font-colrv1\"> <u>\u0432\u043a\u043b\u044e\u0447\u0438\u043b\u0430<\/u><\/a> \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0432 \u0441\u0432\u043e\u0439 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0438 \u0437\u0430\u044f\u0432\u0438\u043b\u0430, \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u00ab\u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b OpenType-SVG \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 \u0432\u0435\u0431\u0435\u00bb. Apple \u043d\u0435 \u0442\u043e\u0440\u043e\u043f\u0438\u0442\u0441\u044f \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c COLRv1 \u0432 Safari.<\/p>\n<p>\u0428\u0440\u0438\u0444\u0442\u044b COLRv1 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0438 \u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u0432\u0441\u0435 \u0431\u0443\u043a\u0432\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0434\u043d\u043e\u0442\u043e\u043d\u043d\u044b\u043c\u0438 (\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e CSS color, \u043a\u0430\u043a \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430). \u041d\u0430\u043c \u0435\u0449\u0451 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u043c\u043d\u043e\u0433\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u043b\u0438\u0442\u0435\u0439\u043d\u044b\u0435 \u0441\u0442\u0443\u0434\u0438\u0438 \u0432\u044b\u043f\u0443\u0441\u0442\u044f\u0442 \u0448\u0440\u0438\u0444\u0442\u044b COLRv1, \u0430 \u0432\u0435\u0434\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Figma) \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0434\u0430\u0436\u0435 COLRv0. \u0418 \u0432\u0441\u0451 \u0436\u0435 \u044f \u0432\u0435\u0440\u044e \u0432 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u2014 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 \u0432\u0435\u0431\u0435. \u0417\u0430 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f COLRv1 \u0443\u0436\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438:<a href=\"https:\/\/github.com\/aliftype\/reem-kufi\"> <u>Reem Kufi<\/u><\/a> \u0438<a href=\"https:\/\/djr.com\/notes\/bradley-initials-font-of-the-month\"> <u>Bradley Initials<\/u><\/a>.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>COLR \u0438 CSS<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u0446\u0432\u0435\u0442\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c, \u0442\u043e, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430\u043c\u0438. \u0414\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CSS \u0431\u044b\u043b\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0421\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c<a href=\"https:\/\/www.w3.org\/TR\/css-fonts-4\/#propdef-font-palette\"> <u>font-palette<\/u><\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0441\u0445\u0435\u043c\u0443 \u0448\u0440\u0438\u0444\u0442\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e \u0448\u0440\u0438\u0444\u0442\u0430\u043c\u0438 COLRv0 \u0438 COLRv1. (<a href=\"https:\/\/twitter.com\/Litherum\/status\/1456309796290789376\"><u>\u041c\u0430\u0439\u043b\u0437 \u041c\u0430\u043a\u0441\u0444\u0438\u043b\u0434<\/u><\/a> \u0438\u0437 Apple \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442, \u0447\u0442\u043e \u0448\u0440\u0438\u0444\u0442\u044b SVG \u043c\u043e\u0436\u043d\u043e <em>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c <\/em>\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u043b\u0438\u0442\u0440, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a \u0432\u0441\u0435 \u0446\u0432\u0435\u0442\u0430 COLR \u0448\u0440\u0438\u0444\u0442\u043e\u0432 <em>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438<\/em> \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 CSS).<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u0443\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u2013 \u044d\u0442\u043e \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u043e. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u0437\u0430 \u043d\u0430\u0441 \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0432 \u0448\u0440\u0438\u0444\u0442\u044b. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e<a href=\"https:\/\/www.w3.org\/TR\/css-fonts-4\/#base-palette-desc\"> <u>base-palette<\/u><\/a> \u0432 CSS \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0445\u0435\u043c\u044b.<\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0432 \u0448\u0440\u0438\u0444\u0442\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430? \u042d\u0442\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442 \u0441\u0430\u0439\u0442 \u0448\u0440\u0438\u0444\u0442\u0430. \u0410 \u0435\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442, \u0442\u043e \u0435\u0441\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c<a href=\"https:\/\/wakamaifondue.com\/\"> <u>Wakamai Fondue<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0445\u0435\u043c\u044b (\u0441\u043c. \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435). \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e<a href=\"https:\/\/www.harbortype.com\/fonts\/rocher-color\/\"> <u>Rocher Color<\/u><\/a> \u2013 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u043e\u0442 Henrique Beier \u0441 \u043d\u043e\u0442\u043a\u0430\u043c\u0438 Flinstone. \u041f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 Wakamai Foundue \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 \u0448\u0440\u0438\u0444\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f 4 \u0446\u0432\u0435\u0442\u0430 \u0438 \u043e\u043d \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 11 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438 \u043f\u0430\u043b\u0438\u0442\u0440\u044b.<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e base-palette: 0 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (\u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 Rocher \u044d\u0442\u043e \u043e\u0442\u0442\u0435\u043d\u043a\u0438 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u043e\u0433\u043e \u0438 \u043a\u043e\u0440\u0438\u0447\u043d\u0435\u0432\u043e\u0433\u043e).<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<p>\u0427\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 base-palette: 1 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0435\u043c \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0442. \u0434. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u0434\u0430 \u044f \u0432\u044b\u0431\u0438\u0440\u0430\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043e\u0442\u0442\u0435\u043d\u043a\u0430\u043c\u0438 \u0441\u0435\u0440\u043e\u0433\u043e:<\/p>\n<pre><code class=\"css\"> @font-palette-values --Grays {   font-family: Rocher;   base-palette: 9; }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0430\u0432\u0438\u043b\u043e CSS<a href=\"https:\/\/www.w3.org\/TR\/css-fonts-4\/#font-palette-values\"> <u>@font-palette-values<\/u><\/a> \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437 font-palette:<\/p>\n<pre><code class=\"css\">.grays {   font-family: 'Rocher';   font-palette: --Grays; }<\/code><\/pre>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/629132f615db00b4622648d6\" data-style=\"\" id=\"629132f615db00b4622648d6\" width=\"\"><\/div>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0432\u0430\u043c \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c <em>\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e <\/em>\u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0430\u0448\u0438\u043c \u0444\u0438\u0440\u043c\u0435\u043d\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u0430\u043c \u0438\u043b\u0438 \u043d\u044e\u0430\u043d\u0441\u0430\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0446\u0432\u0435\u0442\u0430, \u043d\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435 base-palette.<\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043e\u0437\u044c\u043c\u0451\u043c<a href=\"https:\/\/djr.com\/bungee\/\"> <u>Bungee<\/u><\/a> \u043e\u0442 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<a href=\"https:\/\/djr.com\/\"> <u>\u0414\u044d\u0432\u0438\u0434\u0430 \u0414\u0436\u043e\u043d\u0430\u0442\u0430\u043d\u0430 \u0420\u043e\u0441\u0441\u0430<\/u><\/a>. \u0412 \u043d\u0451\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f 2 \u0446\u0432\u0435\u0442\u0430: \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0438 \u0431\u0435\u043b\u044b\u0439. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435 \u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u043e\u0431\u0430 \u0446\u0432\u0435\u0442\u0430 \u0448\u0440\u0438\u0444\u0442\u0430, \u0430 base-palette \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0435 \u0432\u0430\u0436\u043d\u0430:<\/p>\n<pre><code class=\"css\">@font-palette-values --PinkAndGray {   font-family: bungee;   override-colors:     0 #c1cbed,     1 #ff3a92; }  @font-palette-values --GrayAndPink {   font-family: bungee;   override-colors:     0 #ff3a92,     1 #c1cbed; }<\/code><\/pre>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u2014 \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c base-palette, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0446\u0432\u0435\u0442\u0430. \u041d\u0438\u0436\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0441\u0435\u0440\u0443\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 Rocher, \u043d\u043e \u043c\u0435\u043d\u044f\u044e \u043e\u0434\u0438\u043d \u0446\u0432\u0435\u0442 \u043d\u0430 \u043c\u044f\u0442\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u044b\u0439:<\/p>\n<pre><code class=\"css\">@font-palette-values --GraysRemix {   font-family: Rocher;   base-palette: 9;   override-colors:      2 rgb(90,290,210); }  body {   font-family: \"Rocher\";   font-palette: --GraysRemix; }<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 override-colors \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u043c \u0447\u0438\u0441\u043b\u043e\u043c \u043a\u0430\u043a\u043e\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0448\u0440\u0438\u0444\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0451\u043d. \u0422\u0443\u0442 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u043f\u0440\u043e\u0431 \u0438 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<p>\u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0430\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u044d\u043c\u043e\u0434\u0437\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,<a href=\"https:\/\/github.com\/mozilla\/twemoji-colr\"> <u>Twemoji<\/u><\/a> (\u0441\u043c. \u043d\u0438\u0436\u0435) \u0438\u043b\u0438 Noto. \u0412\u043e\u0442<a href=\"https:\/\/rsheeter.github.io\/recolor\"> <u>\u0437\u0430\u0431\u0430\u0432\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f<\/u><\/a> \u043e\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438\u0437 Google:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<h2>\u0422\u0435\u043a\u0443\u0449\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>\u0412\u043e\u0442 \u043e\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u0441\u043a\u043e\u0440\u0431\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439: \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 @font-palette-values\u2026 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0441\u0435\u0439\u0447\u0430\u0441. \u0422\u043e \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043d\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n<pre><code class=\"css\">@font-palette-values --PinkAndBlue {   font-family: bungee;   override-colors:     0 var(--pink),     1 var(--blue); }<\/code><\/pre>\n<p>\u0415\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 font-palette \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0418\u043d\u0430\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0432 \u0434\u0440\u0443\u0433\u0443\u044e, \u043d\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u043f\u043b\u0430\u0432\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043c\u043e\u044f \u043c\u0435\u0447\u0442\u0430 \u043e \u0431\u0440\u043e\u0441\u043a\u043e\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0448\u0440\u0438\u0444\u0442\u0435 \u044d\u043c\u043e\u0434\u0437\u0438 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043c\u0435\u0447\u0442\u043e\u0439.<\/p>\n<h3>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/h3>\n<p>font-palette \u0438 @font-palette-values \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 Safari \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 15.4. \u0412<a href=\"https:\/\/blog.chromium.org\/2022\/03\/chrome-101-federated-credential.html\"> <u>Chrome \u0438 Edge<\/u><\/a> \u043e\u043d\u0438 \u0434\u043e\u0448\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0432\u044b\u0445\u043e\u0434\u043e\u043c \u0432\u0435\u0440\u0441\u0438\u0438 101.<\/p>\n<p>\u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0432\u0437\u044f\u0442\u044b \u0441<a href=\"http:\/\/caniuse.com\/#feat=%E2%80%9Dcss-font-palette%E2%80%9D\"> <u>Caniuse<\/u><\/a>, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0427\u0438\u0441\u043b\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0432\u0435\u0440\u0441\u0438\u044e, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<p><em>\u041d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b<\/em><\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">Chrome<\/p>\n<\/td>\n<td>\n<p align=\"left\">Firefox<\/p>\n<\/td>\n<td>\n<p align=\"left\">IE<\/p>\n<\/td>\n<td>\n<p align=\"left\">Edge<\/p>\n<\/td>\n<td>\n<p align=\"left\">Safari<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">15.4<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><em>\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \/ \u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b<\/em><\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">Android Chrome<\/p>\n<\/td>\n<td>\n<p align=\"left\">Android Firefox<\/p>\n<\/td>\n<td>\n<p align=\"left\">Android<\/p>\n<\/td>\n<td>\n<p align=\"left\">iOS Safari<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041d\u0435\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">101<\/p>\n<\/td>\n<td>\n<p align=\"left\">15.4<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3><\/h><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-333747","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=333747"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/333747\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=333747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=333747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=333747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}