{"id":43611,"date":"2025-09-23T17:45:54","date_gmt":"2025-09-23T14:45:54","guid":{"rendered":"https:\/\/goit.global\/?p=43611"},"modified":"2026-01-06T11:52:01","modified_gmt":"2026-01-06T09:52:01","slug":"property-font-family","status":"publish","type":"post","link":"https:\/\/goit.global\/ua\/glossary\/css\/font-family\/","title":{"rendered":"font-family"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\"><strong>font-family<\/strong><\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">CSS-\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c font-family (\u0443\u043a\u0440. \u2014 &#8220;\u0441\u0456\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u0448\u0440\u0438\u0444\u0442\u0456\u0432&#8221;) \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0448\u0440\u0438\u0444\u0442\u0456\u0432, \u044f\u043a\u0456 \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u044e\u0442\u044c\u0441\u044f \u0434\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412\u043e\u043d\u0430 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u0437\u043c\u0456\u043d\u044e\u0432\u0430\u0442\u0438 \u0442\u0438\u043f \u0448\u0440\u0438\u0444\u0442\u0456\u0432 \u0434\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0456\u0432, \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0456\u0432, \u043a\u043d\u043e\u043f\u043e\u043a \u0442\u0430 \u0456\u043d\u0448\u0438\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0438\u0445 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456. \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0438\u0439 \u0432\u0438\u0431\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0456\u0432 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0441\u0442\u0438\u043b\u044c\u043d\u0438\u0439, \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0438\u0439 \u0456 \u043f\u0440\u043e\u0444\u0435\u0441\u0456\u0439\u043d\u0438\u0439 \u0432\u0438\u0433\u043b\u044f\u0434 \u0441\u0430\u0439\u0442\u0443.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u0406\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0438\u0439 \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f<\/strong><\/h2>\n\n\n\n\n<section id=\"glossary-examplesblock_8fef061ef25844653bd0d535cac8c3ac\" class=\"gb-glossary-examples- glossary-examples\">\n\t\n\t\t<div class=\"demo-container\">\n\t\t\t<div class=\"demo-content\">\n\t\t\t\t<div class=\"controls-panel\">\n\t\t\t\t\t<div class=\"control-group\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button class=\"control-option active\"\n\t\t\t\t\t\t\t\tonclick=\"setExample(0)\" data-rule=\"font-family: Montserrat, sans-serif;\">\n\t\t\t\t\t\t\t\tfont-family: Montserrat, sans-serif;\t\t\t\t\t\t\t\t<span class=\"copy-feedback\">\u0421\u043a\u043e\u043f\u0456\u0439\u043e\u0432\u0430\u043d\u043e!<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button class=\"control-option \"\n\t\t\t\t\t\t\t\tonclick=\"setExample(1)\" data-rule=\"font-family: &quot;Times New Roman&quot;, serif;\">\n\t\t\t\t\t\t\t\tfont-family: &quot;Times New Roman&quot;, serif;\t\t\t\t\t\t\t\t<span class=\"copy-feedback\">\u0421\u043a\u043e\u043f\u0456\u0439\u043e\u0432\u0430\u043d\u043e!<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button class=\"control-option \"\n\t\t\t\t\t\t\t\tonclick=\"setExample(2)\" data-rule=\"font-family: &quot;Roboto&quot;, &quot;Helvetica&quot;, sans-serif;\">\n\t\t\t\t\t\t\t\tfont-family: &quot;Roboto&quot;, &quot;Helvetica&quot;, sans-serif;\t\t\t\t\t\t\t\t<span class=\"copy-feedback\">\u0421\u043a\u043e\u043f\u0456\u0439\u043e\u0432\u0430\u043d\u043e!<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"preview-panel\">\n\t\t\t\t\t<div class=\"preview-container parent\"\n\t\t\t\t\t\tstyle=\"\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"preview\" id=\"previewText\">\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\u0412\u0438\u043f\u0443\u0441\u043a\u043d\u0438\u043a\u0438 GoIT \u043f\u0440\u0430\u0446\u044e\u044e\u0442\u044c \u0443 2100+ \u0406\u0422-\u043a\u043e\u043c\u043f\u0430\u043d\u0456\u0439 \u0423\u043a\u0440\u0430\u0457\u043d\u0438, \u0404\u0432\u0440\u043e\u043f\u0438 \u0442\u0430 \u0421\u0428\u0410\t\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t<!-- text under example boxes \/ applies for all types -->\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<script>\n\t\t\tconst examples = [{\"title\":\"font-family: Montserrat, sans-serif;\",\"additional_urls\":false,\"additional_rules\":false},{\"title\":\"font-family: \\\"Times New Roman\\\", serif;\",\"additional_urls\":false,\"additional_rules\":false},{\"title\":\"font-family: \\\"Roboto\\\", \\\"Helvetica\\\", sans-serif;\",\"additional_urls\":false,\"additional_rules\":false}];\n\t\t\tconst type = \"text\";\n\t\t\tconst additionalRules = false;\n\t\t\tconst parentRules = false;\n\t\t\tconst childRules = false;\n\t\t\tconst contentImage = null;\n\n\t\t\tlet currentIndex = 0;\n\n\t\t\tfunction copyToClipboard(text, button) {\n\t\t\t\t\/\/ Try using the modern clipboard API first\n\t\t\t\tif (navigator.clipboard && navigator.clipboard.writeText) {\n\t\t\t\t\tnavigator.clipboard.writeText(text).then(() => {\n\t\t\t\t\t\tshowCopyFeedback(button);\n\t\t\t\t\t}).catch(() => {\n\t\t\t\t\t\t\/\/ Fallback for older browsers\n\t\t\t\t\t\tfallbackCopyToClipboard(text, button);\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\t\/\/ Fallback for older browsers\n\t\t\t\t\tfallbackCopyToClipboard(text, button);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction fallbackCopyToClipboard(text, button) {\n\t\t\t\tconst textArea = document.createElement('textarea');\n\t\t\t\ttextArea.value = text;\n\t\t\t\ttextArea.style.position = 'fixed';\n\t\t\t\ttextArea.style.left = '-999999px';\n\t\t\t\ttextArea.style.top = '-999999px';\n\t\t\t\tdocument.body.appendChild(textArea);\n\t\t\t\ttextArea.focus();\n\t\t\t\ttextArea.select();\n\n\t\t\t\ttry {\n\t\t\t\t\tdocument.execCommand('copy');\n\t\t\t\t\tshowCopyFeedback(button);\n\t\t\t\t} catch (err) {\n\t\t\t\t\tconsole.error('Failed to copy text: ', err);\n\t\t\t\t}\n\n\t\t\t\tdocument.body.removeChild(textArea);\n\t\t\t}\n\n\t\t\tfunction showCopyFeedback(button) {\n\t\t\t\t\/\/ Add copied class for visual feedback\n\t\t\t\tbutton.classList.add('copied');\n\n\t\t\t\t\/\/ Show copy feedback\n\t\t\t\tconst feedback = button.querySelector('.copy-feedback');\n\t\t\t\tfeedback.classList.add('show');\n\n\t\t\t\t\/\/ Remove feedback after 1.5 seconds\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tfeedback.classList.remove('show');\n\t\t\t\t\tbutton.classList.remove('copied');\n\t\t\t\t}, 1500);\n\t\t\t}\n\n\t\t\tfunction buildBackgroundImages(item) {\n\t\t\t\t\/\/ Build background images for the current example\n\t\t\t\tlet backgroundImages = [`url('${contentImage.url}')`];\n\n\t\t\t\tif (item.additional_urls && Array.isArray(item.additional_urls)) {\n\t\t\t\t\titem.additional_urls.forEach(urlObj => {\n\t\t\t\t\t\tif (urlObj.url && urlObj.url.url) {\n\t\t\t\t\t\t\tbackgroundImages.push(`url('${urlObj.url.url}')`);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn backgroundImages.join(', ');\n\t\t\t}\n\n\t\t\tfunction setExample(index, shouldCopy = true) {\n\t\t\t\tconst item = examples[index];\n\t\t\t\tcurrentIndex = index;\n\t\t\t\tlet activeChildIndex = 0;\n\n\t\t\t\t\/\/ Reset all preview elements to their base styles\n\t\t\t\tresetPreviewStyles();\n\n\t\t\t\t\/\/ Apply styles based on type\n\t\t\t\tif (type === \"text\") {\n\t\t\t\t\tconst previewText = document.getElementById('previewText');\n\t\t\t\t\tconst paragraph = previewText.querySelector(\"p\");\n\n\t\t\t\t\t\/\/ Apply the main rule\n\t\t\t\t\tparagraph.style.cssText += '; ' + item.title;\n\n\t\t\t\t\t\/\/ Apply additional rules if they exist\n\t\t\t\t\tif (additionalRules) {\n\t\t\t\t\t\tadditionalRules.forEach(rule => {\n\t\t\t\t\t\t\tparagraph.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply parent rules to the preview container\n\t\t\t\t\tif (parentRules) {\n\t\t\t\t\t\tparentRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewText.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t} else if (type === \"pic\") {\n\t\t\t\t\tconst previewImage = document.getElementById('previewImage');\n\t\t\t\t\tconst img = previewImage.querySelector(\"img\");\n\n\t\t\t\t\t\/\/ Apply the main rule to the image\n\t\t\t\t\timg.style.cssText += '; ' + item.title;\n\n\t\t\t\t\t\/\/ Apply additional rules if they exist\n\t\t\t\t\tif (additionalRules) {\n\t\t\t\t\t\tadditionalRules.forEach(rule => {\n\t\t\t\t\t\t\timg.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply parent rules to the preview container\n\t\t\t\t\tif (parentRules) {\n\t\t\t\t\t\tparentRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewImage.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t} else if (type === \"background\") {\n\t\t\t\t\tconst previewBg = document.getElementById('previewBackground');\n\n\t\t\t\t\tif (item.title.includes(\"url\")) {\n\t\t\t\t\t\t\/\/ Update background images for this specific example\n\t\t\t\t\t\tconst bgImages = buildBackgroundImages(item);\n\t\t\t\t\t\tpreviewBg.style.backgroundImage = bgImages;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t\/\/ Apply the main rule to the background container\n\t\t\t\t\t\tpreviewBg.style.cssText += '; ' + item.title;\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply additional rules if they exist\n\t\t\t\t\tif (additionalRules) {\n\t\t\t\t\t\tadditionalRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewBg.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply parent rules to the preview container\n\t\t\t\t\tif (parentRules) {\n\t\t\t\t\t\tparentRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewBg.parentNode.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else if (type === \"box\") {\n\t\t\t\t\tconst previewBox = document.getElementById('previewBox');\n\n\t\t\t\t\t\/\/ Apply the main rule to the background container\n\t\t\t\t\tpreviewBox.style.cssText += '; ' + item.title;\n\n\t\t\t\t\tif (item.additional_rules && Array.isArray(item.additional_rules)) {\n\t\t\t\t\t\titem.additional_rules.forEach(rule => {\n\t\t\t\t\t\t\tif (rule) {\n\t\t\t\t\t\t\t\tpreviewBox.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply additional rules if they exist\n\t\t\t\t\tif (additionalRules) {\n\t\t\t\t\t\tadditionalRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewBox.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply parent rules to the preview container\n\t\t\t\t\tif (childRules) {\n\t\t\t\t\t\tconst childParagraph = previewBox.querySelector(\"p\");\n\n\t\t\t\t\t\tif (childParagraph) {\n\t\t\t\t\t\t\tchildRules.forEach(rule => {\n\t\t\t\t\t\t\t\tpreviewBox.querySelector(\"p\").style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif (parentRules) {\n\t\t\t\t\t\tparentRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewBox.parentNode.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else if (type === \"positioning\") {\n\t\t\t\t\tconst activeChild = document.getElementById('active-child-block');\n\t\t\t\t\tif (!activeChild) return;\n\n\t\t\t\t\t\/\/ \u0434\u043e\u0434\u0430\u0454\u043c\u043e CSS \u0437 \u043a\u043d\u043e\u043f\u043a\u0438\n\t\t\t\t\tactiveChild.style.cssText += '; ' + item.title;\n\t\t\t\t}\n\n\t\t\t\t\/\/ Update active button\n\t\t\t\tupdateActiveButton(index);\n\n\t\t\t\t\/\/ Copy the rule to clipboard only if shouldCopy is true\n\t\t\t\tif (shouldCopy) {\n\t\t\t\t\tconst ruleText = item.title;\n\t\t\t\t\tconst buttons = document.querySelectorAll('.control-option');\n\t\t\t\t\tcopyToClipboard(ruleText, buttons[index]);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction resetPreviewStyles() {\n\t\t\t\t\/\/ Reset text preview\n\t\t\t\tconst previewText = document.getElementById('previewText');\n\t\t\t\tif (previewText) {\n\t\t\t\t\tpreviewText.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\tconst paragraph = previewText.querySelector('p');\n\t\t\t\t\tif (paragraph) {\n\t\t\t\t\t\tparagraph.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t\/\/ Reset image preview\n\t\t\t\tconst previewImage = document.getElementById('previewImage');\n\t\t\t\tif (previewImage) {\n\t\t\t\t\tpreviewImage.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\tconst img = previewImage.querySelector('img');\n\t\t\t\t\tif (img) {\n\t\t\t\t\t\timg.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t\/\/ Reset background preview\n\t\t\t\tconst previewBg = document.getElementById('previewBackground');\n\t\t\t\tif (previewBg) {\n\t\t\t\t\t\/\/ Apply only base background styles (no accumulated styles)\n\t\t\t\t\tpreviewBg.style.cssText = `\n\t\t\t\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\t\t\t\theight: 200px;\n\t\t\t\t\t\t\t\t\t\t\tborder-radius: 8px;\n\t\t\t\t\t\t\t\t\t\t\tbackground-size: cover;\n\t\t\t\t\t\t\t\t\t\t\tbackground-position: center;\n\t\t\t\t\t\t\t\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\t\t\t\t\t\t\t\ttransition: all 0.3s ease;\n\t\t\t\t\t\t\t\t\t\t\tposition: relative;\n\t\t\t\t\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t\t\t\t\t\t`;\n\n\t\t\t\t\t\/\/ Reset parent container\n\t\t\t\t\tif (previewBg.parentNode) {\n\t\t\t\t\t\tpreviewBg.parentNode.style.cssText = '';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t\/\/ Reset box preview\n\t\t\t\tconst previewBox = document.getElementById('previewBox');\n\t\t\t\tif (previewBox) {\n\t\t\t\t\tpreviewBox.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\tconst paragraph = previewBox.querySelector('p');\n\t\t\t\t\tif (paragraph) {\n\t\t\t\t\t\tparagraph.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Reset parent container\n\t\t\t\t\tif (previewBox.parentNode) {\n\t\t\t\t\t\tpreviewBox.parentNode.style.cssText = '';\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction updateActiveButton(index) {\n\t\t\t\tconst buttons = document.querySelectorAll('.control-option');\n\t\t\t\tbuttons.forEach(button => {\n\t\t\t\t\tbutton.classList.remove('active');\n\t\t\t\t});\n\t\t\t\tif (buttons[index]) {\n\t\t\t\t\tbuttons[index].classList.add('active');\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t\/\/ Add keyboard navigation\n\t\t\tdocument.addEventListener('keydown', function(e) {\n\t\t\t\tconst numExamples = examples.length;\n\n\t\t\t\tif (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tconst nextIndex = (currentIndex + 1) % numExamples;\n\t\t\t\t\tsetExample(nextIndex);\n\t\t\t\t} else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tconst prevIndex = currentIndex === 0 ? numExamples - 1 : currentIndex - 1;\n\t\t\t\t\tsetExample(prevIndex);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\t\/\/ Initialize without copying\n\t\t\tsetExample(0, false);\n\t\t<\/script>\n\t<\/section>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>font-family: \"font1\", \"font2\", \"font3\", ... ;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>\"font-name\"<\/code><\/strong> \u2014 \u0456\u043c\u2019\u044f \u0448\u0440\u0438\u0444\u0442\u0430. \u0426\u0435 \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0435 \u0456\u043c\u2019\u044f \u0448\u0440\u0438\u0444\u0442\u0430, \u0442\u0430\u043a\u0435 \u044f\u043a <code>\"Arial\"<\/code>, <code>\"Verdana\"<\/code>, <code>\"Georgia\"<\/code>, <code>\"Times New Roman\"<\/code> \u0442\u043e\u0449\u043e. \u0406\u043c\u0435\u043d\u0430 \u0448\u0440\u0438\u0444\u0442\u0456\u0432 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0431\u0440\u0430\u0442\u0438 \u0432 \u043b\u0430\u043f\u043a\u0438, \u044f\u043a\u0449\u043e \u0432\u043e\u043d\u0438 \u0441\u043a\u043b\u0430\u0434\u0430\u044e\u0442\u044c\u0441\u044f \u0437 \u043a\u0456\u043b\u044c\u043a\u043e\u0445 \u0441\u043b\u0456\u0432.<\/li>\n\n\n\n<li><strong><code>generic-family<\/code><\/strong> \u2014 \u0437\u0430\u0433\u0430\u043b\u044c\u043d\u0430 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0456\u044f \u0448\u0440\u0438\u0444\u0442\u0456\u0432. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434:\n<ul class=\"wp-block-list\">\n<li><strong><code>serif<\/code><\/strong> \u2014 \u0448\u0440\u0438\u0444\u0442 \u0437 \u0437\u0430\u0441\u0456\u0447\u043a\u0430\u043c\u0438, \u0442\u0430\u043a\u0438\u0439 \u044f\u043a <strong>Times New Roman<\/strong> \u0430\u0431\u043e <strong>Georgia<\/strong>.<\/li>\n\n\n\n<li><strong><code>sans-serif<\/code><\/strong> \u2014 \u0448\u0440\u0438\u0444\u0442 \u0431\u0435\u0437 \u0437\u0430\u0441\u0456\u0447\u043e\u043a, \u0442\u0430\u043a\u0438\u0439 \u044f\u043a <strong>Arial<\/strong> \u0430\u0431\u043e <strong>Helvetica<\/strong>.<\/li>\n\n\n\n<li><strong><code>monospace<\/code><\/strong> \u2014 \u0448\u0440\u0438\u0444\u0442, \u0434\u0435 \u0432\u0441\u0456 \u0441\u0438\u043c\u0432\u043e\u043b\u0438 \u043c\u0430\u044e\u0442\u044c \u043e\u0434\u043d\u0430\u043a\u043e\u0432\u0443 \u0448\u0438\u0440\u0438\u043d\u0443, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, <strong>Courier New<\/strong>.<\/li>\n\n\n\n<li><strong><code>cursive<\/code><\/strong> \u2014 \u0448\u0440\u0438\u0444\u0442, \u0441\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u0438\u0439.<\/li>\n\n\n\n<li><strong><code>fantasy<\/code><\/strong> \u2014 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0456\u0437\u043e\u0432\u0430\u043d\u0438\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0456\u0432.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u041a\u0440\u0456\u043c \u0446\u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u044c, \u0443 \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0457 CSS-\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 \u0454 \u0441\u043b\u0443\u0436\u0431\u043e\u0432\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>inherit<\/strong> \u2014 \u043d\u0430\u0441\u043b\u0456\u0434\u0443\u0454 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432\u0456\u0434 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/li>\n\n\n\n<li><strong>initial<\/strong> \u2014 \u0441\u043a\u0438\u0434\u0430\u0454 \u0434\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c;<\/li>\n\n\n\n<li><strong>unset<\/strong> \u2014 \u043f\u043e\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u044f\u043a <code>inherit<\/code> \u0434\u043b\u044f \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0435\u0439, \u0449\u043e \u043d\u0430\u0441\u043b\u0456\u0434\u0443\u044e\u0442\u044c\u0441\u044f, \u0456 \u044f\u043a <code>initial<\/code> \u0434\u043b\u044f \u043d\u0435\u043d\u0430\u0441\u043b\u0456\u0434\u0443\u0432\u0430\u043d\u0438\u0445;<\/li>\n\n\n\n<li><strong>revert<\/strong> \u2014 \u0441\u043a\u0430\u0441\u043e\u0432\u0443\u0454 \u0441\u0442\u0438\u043b\u0456 \u0430\u0432\u0442\u043e\u0440\u0430 \u0456 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u0454 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437 \u0442\u0430\u0431\u043b\u0438\u0446\u0456 \u0441\u0442\u0438\u043b\u0456\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0447\u0438 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430;<\/li>\n\n\n\n<li><strong>revert-layer<\/strong> \u2014 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u0454 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044c\u043e\u0433\u043e \u0448\u0430\u0440\u0443 \u043a\u0430\u0441\u043a\u0430\u0434\u0443 (<code>@layer<\/code>).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u0414\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0456 \u043c\u043e\u043c\u0435\u043d\u0442\u0438<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u041f\u0440\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u0456 <strong><code>font-family<\/code><\/strong> \u0432\u0430\u0436\u043b\u0438\u0432\u043e \u0432\u043a\u0430\u0437\u0443\u0432\u0430\u0442\u0438 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u0456 \u0448\u0440\u0438\u0444\u0442\u0438, \u044f\u043a\u0456 \u0431\u0443\u0434\u0443\u0442\u044c \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438\u0441\u044f, \u044f\u043a\u0449\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 \u043d\u0435 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u044c\u0441\u044f \u0430\u0431\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u043d\u0430 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434: &#8220;Arial&#8221;, sans-serif \u2014 \u044f\u043a\u0449\u043e \u0448\u0440\u0438\u0444\u0442 Arial \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0438\u0439, \u0431\u0443\u0434\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043e \u043f\u0435\u0440\u0448\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 \u0456\u0437 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0456\u0457 sans-serif.<\/li>\n\n\n\n<li>\u0423 \u0440\u0430\u0437\u0456, \u044f\u043a\u0449\u043e \u0448\u0440\u0438\u0444\u0442 \u0441\u043a\u043b\u0430\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0437 \u043a\u0456\u043b\u044c\u043a\u043e\u0445 \u0441\u043b\u0456\u0432, \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u043e\u0431\u0435\u0440\u0442\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u0432 \u043b\u0430\u043f\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, <code>\"Times New Roman\"<\/code>.<\/li>\n\n\n\n<li>\u042f\u043a\u0449\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u0448\u0440\u0438\u0444\u0442\u0456\u0432 \u0443 <strong><code>font-family<\/code><\/strong> \u043d\u0435 \u043c\u0456\u0441\u0442\u0438\u0442\u044c \u0436\u043e\u0434\u043d\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u0442\u043e \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u0439 \u0448\u0440\u0438\u0444\u0442, \u0432\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0456\u0457, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0434\u043b\u044f <strong>sans-serif<\/strong> \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0436\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0448\u0440\u0438\u0444\u0442 <strong>Helvetica<\/strong> \u0430\u0431\u043e <strong>Arial<\/strong>.<\/li>\n\n\n\n<li>\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u0440\u0456\u0437\u043d\u0438\u0445 \u0448\u0440\u0438\u0444\u0442\u0456\u0432 \u0434\u043b\u044f \u0440\u0456\u0437\u043d\u0438\u0445 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u043c\u043e\u0436\u0435 \u043f\u043e\u043a\u0440\u0430\u0449\u0438\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d \u0442\u0430 \u0441\u043f\u0440\u0438\u044f\u0442\u0438 \u043a\u0440\u0430\u0449\u0456\u0439 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0456, \u043e\u0434\u043d\u0430\u043a \u0432\u0430\u0436\u043b\u0438\u0432\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u0437\u0430\u043d\u0430\u0434\u0442\u043e \u0432\u0435\u043b\u0438\u043a\u043e\u044e \u043a\u0456\u043b\u044c\u043a\u0456\u0441\u0442\u044e \u0448\u0440\u0438\u0444\u0442\u0456\u0432.<\/li>\n\n\n\n<li>\u041f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0441\u0456\u043c\u0430 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>font-family CSS-\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c font-family (\u0443\u043a\u0440. \u2014 &#8220;\u0441\u0456\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u0448\u0440\u0438\u0444\u0442\u0456\u0432&#8221;) \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0448\u0440\u0438\u0444\u0442\u0456\u0432, \u044f\u043a\u0456 \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u044e\u0442\u044c\u0441\u044f \u0434\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412\u043e\u043d\u0430 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u0437\u043c\u0456\u043d\u044e\u0432\u0430\u0442\u0438 \u0442\u0438\u043f \u0448\u0440\u0438\u0444\u0442\u0456\u0432 \u0434\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0456\u0432, \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0456\u0432, \u043a\u043d\u043e\u043f\u043e\u043a \u0442\u0430 \u0456\u043d\u0448\u0438\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0438\u0445 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456. \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0438\u0439 \u0432\u0438\u0431\u0456\u0440 \u0448\u0440\u0438\u0444\u0442\u0456\u0432 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0441\u0442\u0438\u043b\u044c\u043d\u0438\u0439, \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0438\u0439 \u0456 \u043f\u0440\u043e\u0444\u0435\u0441\u0456\u0439\u043d\u0438\u0439 \u0432\u0438\u0433\u043b\u044f\u0434 \u0441\u0430\u0439\u0442\u0443. \u0406\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0438\u0439 \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u041a\u0440\u0456\u043c \u0446\u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u044c, \u0443 \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0457 CSS-\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 \u0454 &hellip; <a href=\"https:\/\/goit.global\/ua\/glossary\/css\/font-family\/\">Continued<\/a><\/p>\n","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[10956],"tags":[],"class_list":["post-43611","post","type-post","status-publish","format-standard","hentry","category-html-dictionary-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/posts\/43611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/comments?post=43611"}],"version-history":[{"count":4,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/posts\/43611\/revisions"}],"predecessor-version":[{"id":47573,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/posts\/43611\/revisions\/47573"}],"wp:attachment":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/media?parent=43611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/categories?post=43611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/tags?post=43611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}