Simulator de Text cu Fonturi \u00cencorporate<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n margin: 0;\r\n padding: 20px;\r\n background-color: #f5f5f5;\r\n }\r\n \r\n .container {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background-color: white;\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n h1 {\r\n text-align: center;\r\n color: #333;\r\n }\r\n \r\n .input-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n label {\r\n display: block;\r\n margin-bottom: 5px;\r\n font-weight: bold;\r\n }\r\n \r\n textarea {\r\n width: 100%;\r\n height: 100px;\r\n padding: 10px;\r\n font-size: 26px;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n box-sizing: border-box;\r\n }\r\n \r\n select, input[type=\"color\"] {\r\n padding: 8px;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n margin-top: 5px;\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n \r\n .preview-container {\r\n margin-top: 30px;\r\n padding: 20px;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n min-height: 100px;\r\n }\r\n \r\n #text-preview {\r\n font-size: 34px;\r\n word-wrap: break-word;\r\n }\r\n \r\n .font-size-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .font-size-control input {\r\n flex: 1;\r\n }\r\n \r\n .explanation {\r\n margin-top: 30px;\r\n padding: 15px;\r\n background-color: #e9ecef;\r\n border-radius: 5px;\r\n font-size: 14px;\r\n }\r\n \r\n .code-example {\r\n background-color: #f8f9fa;\r\n padding: 15px;\r\n border-radius: 5px;\r\n font-family: monospace;\r\n margin-top: 15px;\r\n white-space: pre-wrap;\r\n font-size: 13px;\r\n }\r\n \r\n .font-category {\r\n margin-top: 10px;\r\n font-weight: bold;\r\n }\r\n \r\n \/* Exemplu de font personalizat \u00eenc\u0103rcat local pentru demo *\/\r\n @font-face {\r\n font-family: 'ExampleFont';\r\n src: local('Arial'); \/* Folosim Arial ca exemplu pentru simulare *\/\r\n font-weight: normal;\r\n font-style: normal;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <h1>Simulator de Text<\/h1>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"text-input\">Scrie aici textul:<\/label>\r\n <textarea id=\"text-input\" placeholder=\"Scrie aici literele...\"><\/textarea>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"font-selector\">Alege fontul:<\/label>\r\n <select id=\"font-selector\">\r\n <optgroup label=\"Fonturi de sistem (deja disponibile)\">\r\n <option value=\"Arial, sans-serif\">Arial<\/option>\r\n <option value=\"'Times New Roman', serif\">Times New Roman<\/option>\r\n <option value=\"'Courier New', monospace\">Courier New<\/option>\r\n <option value=\"Georgia, serif\">Georgia<\/option>\r\n <option value=\"Verdana, sans-serif\">Verdana<\/option>\r\n <option value=\"'Trebuchet MS', sans-serif\">Trebuchet MS<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Google Fonts (incluse \u00een demo)\">\r\n <option value=\"'Nunito', sans-serif\">Nunito<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Fonturile tale (vor trebui ad\u0103ugate)\">\r\n <option value=\"'Bahnschrift', sans-serif\">Bahnschrift<\/option>\r\n <option value=\"'Catallina', sans-serif\">Catallina<\/option>\r\n <option value=\"'Cleveland', sans-serif\">Cleveland<\/option>\r\n <option value=\"'Decomartt', sans-serif\">Decomartt<\/option>\r\n <option value=\"'DK Soerabaja', sans-serif\">DK Soerabaja<\/option>\r\n <option value=\"'Fonseca', sans-serif\">Fonseca<\/option>\r\n <option value=\"'Freida', sans-serif\">Freida<\/option>\r\n <option value=\"'Gaia', sans-serif\">Gaia<\/option>\r\n <option value=\"'Kabel', sans-serif\">Kabel<\/option>\r\n <option value=\"'Mouron', sans-serif\">Mouron<\/option>\r\n <option value=\"'Noir', sans-serif\">Noir<\/option>\r\n <option value=\"'Romantica', sans-serif\">Romantica<\/option>\r\n <option value=\"'Vilane Bold', sans-serif\">Vilane Bold<\/option>\r\n <option value=\"'VAG Rounded', sans-serif\">VAG Rounded<\/option>\r\n <option value=\"'Arial Black', sans-serif\">Arial Black<\/option>\r\n <option value=\"'Super Boom', sans-serif\">Super Boom<\/option>\r\n <option value=\"'Sonic XBD', sans-serif\">Sonic XBD<\/option>\r\n <option value=\"'Segoe UI Black', sans-serif\">Segoe UI Black<\/option>\r\n <option value=\"'Merry Christmas', sans-serif\">Merry Christmas<\/option>\r\n <option value=\"'Lithos Pro', sans-serif\">Lithos Pro<\/option>\r\n <option value=\"'Hubby Bunny', sans-serif\">Hubby Bunny<\/option>\r\n <option value=\"'HandelGothic', sans-serif\">HandelGothic<\/option>\r\n <option value=\"'Gill Sans Ultra Bold', sans-serif\">Gill Sans Ultra Bold<\/option>\r\n <option value=\"'Geometr415 Blk', sans-serif\">Geometr415 Blk<\/option>\r\n <option value=\"'Futura XBLKIT', sans-serif\">Futura XBLKIT<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Exemplu\">\r\n <option value=\"'ExampleFont', sans-serif\">ExampleFont (Simulare)<\/option>\r\n <\/optgroup>\r\n <\/select>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"color-picker\">Alege culoarea:<\/label>\r\n <input type=\"color\" id=\"color-picker\" value=\"#3f5e0a\">\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"font-size\">M\u0103rime font:<\/label>\r\n <div class=\"font-size-control\">\r\n <input type=\"range\" id=\"font-size\" min=\"12\" max=\"72\" value=\"34\" step=\"1\">\r\n <span id=\"font-size-value\">34px<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"preview-container\">\r\n <div id=\"text-preview\">Textul t\u0103u va ap\u0103rea aici<\/div>\r\n <\/div>\r\n \r\n <div class=\"explanation\">\r\n <h3>Cum s\u0103 adaugi fonturile \u00een website-ul t\u0103u:<\/h3>\r\n <p>Pentru ca fonturile personalizate s\u0103 func\u021bioneze pe orice dispozitiv, trebuie s\u0103 le incluzi \u00een website. Iat\u0103 pa\u0219ii necesari:<\/p>\r\n \r\n <ol>\r\n <li><strong>Ob\u021bine fi\u0219ierele fonturilor<\/strong> - Ai nevoie de fi\u0219ierele (.woff2, .woff, .ttf) pentru fiecare font.<\/li>\r\n <li><strong>\u00cencarc\u0103 fonturile pe serverul t\u0103u<\/strong> - Creeaz\u0103 un folder \"fonts\" \u0219i \u00eencarc\u0103 fi\u0219ierele acolo.<\/li>\r\n <li><strong>Adaug\u0103 reguli @font-face \u00een CSS<\/strong> - Pentru fiecare font, adaug\u0103 o regul\u0103 @font-face.<\/li>\r\n <\/ol>\r\n \r\n <div class=\"font-category\">Exemplu de cod pentru a ad\u0103uga fonturile tale:<\/div>\r\n <div class=\"code-example\">\/* \u00cen fi\u0219ierul t\u0103u CSS *\/\r\n@font-face {\r\n font-family: 'Bahnschrift';\r\n src: url('fonts\/bahnschrift.woff2') format('woff2'),\r\n url('fonts\/bahnschrift.woff') format('woff'),\r\n url('fonts\/bahnschrift.ttf') format('truetype');\r\n font-weight: normal;\r\n font-style: normal;\r\n font-display: swap;\r\n}\r\n\r\n@font-face {\r\n font-family: 'Catallina';\r\n src: url('fonts\/catallina.woff2') format('woff2'),\r\n url('fonts\/catallina.woff') format('woff'),\r\n url('fonts\/catallina.ttf') format('truetype');\r\n font-weight: normal;\r\n font-style: normal;\r\n font-display: swap;\r\n}\r\n\r\n\/* Repet\u0103 pentru fiecare font *\/<\/div>\r\n \r\n <div class=\"font-category\">Surse pentru fonturile gratuite:<\/div>\r\n <ul>\r\n <li>Google Fonts (https:\/\/fonts.google.com\/)<\/li>\r\n <li>Font Squirrel (https:\/\/www.fontsquirrel.com\/)<\/li>\r\n <li>DaFont (https:\/\/www.dafont.com\/)<\/li>\r\n <\/ul>\r\n \r\n <div class=\"font-category\">Not\u0103 important\u0103:<\/div>\r\n <p>Asigur\u0103-te c\u0103 ai drepturile legale pentru a utiliza fonturile \u00een website-ul t\u0103u. Unele fonturi necesit\u0103 licen\u021be pentru utilizare comercial\u0103.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Get DOM elements\r\n const textInput = document.getElementById(\"text-input\");\r\n const fontSelector = document.getElementById(\"font-selector\");\r\n const colorPicker = document.getElementById(\"color-picker\");\r\n const fontSizeSlider = document.getElementById(\"font-size\");\r\n const fontSizeValue = document.getElementById(\"font-size-value\");\r\n const textPreview = document.getElementById(\"text-preview\");\r\n \r\n \/\/ Initialize\r\n updatePreview();\r\n \r\n \/\/ Add event listeners\r\n textInput.addEventListener(\"input\", updatePreview);\r\n fontSelector.addEventListener(\"change\", updatePreview);\r\n colorPicker.addEventListener(\"input\", updatePreview);\r\n fontSizeSlider.addEventListener(\"input\", updatePreview);\r\n \r\n \/\/ Update preview function\r\n function updatePreview() {\r\n const text = textInput.value || \"Textul t\u0103u va ap\u0103rea aici\";\r\n const fontFamily = fontSelector.value;\r\n const color = colorPicker.value;\r\n const fontSize = fontSizeSlider.value;\r\n \r\n textPreview.textContent = text;\r\n textPreview.style.fontFamily = fontFamily;\r\n textPreview.style.color = color;\r\n textPreview.style.fontSize = `${fontSize}px`;\r\n fontSizeValue.textContent = `${fontSize}px`;\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Simulator de Text cu Fonturi \u00cencorporate Simulator de Text Scrie aici textul: Alege fontul: ArialTimes New RomanCourier NewGeorgiaVerdanaTrebuchet MS Nunito BahnschriftCatallinaClevelandDecomarttDK SoerabajaFonsecaFreidaGaiaKabelMouronNoirRomanticaVilane BoldVAG RoundedArial BlackSuper BoomSonic XBDSegoe UI BlackMerry ChristmasLithos ProHubby BunnyHandelGothicGill Sans Ultra BoldGeometr415 BlkFutura XBLKIT ExampleFont (Simulare) Alege culoarea: M\u0103rime font: 34px Textul t\u0103u va ap\u0103rea aici Cum s\u0103 adaugi fonturile \u00een website-ul […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2404","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PdwL4v-CM","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/pages\/2404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/comments?post=2404"}],"version-history":[{"count":10,"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/pages\/2404\/revisions"}],"predecessor-version":[{"id":2416,"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/pages\/2404\/revisions\/2416"}],"wp:attachment":[{"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/media?parent=2404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Simulator de Text cu Fonturi \u00cencorporate<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n margin: 0;\r\n padding: 20px;\r\n background-color: #f5f5f5;\r\n }\r\n \r\n .container {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background-color: white;\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n h1 {\r\n text-align: center;\r\n color: #333;\r\n }\r\n \r\n .input-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n label {\r\n display: block;\r\n margin-bottom: 5px;\r\n font-weight: bold;\r\n }\r\n \r\n textarea {\r\n width: 100%;\r\n height: 100px;\r\n padding: 10px;\r\n font-size: 26px;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n box-sizing: border-box;\r\n }\r\n \r\n select, input[type=\"color\"] {\r\n padding: 8px;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n margin-top: 5px;\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n \r\n .preview-container {\r\n margin-top: 30px;\r\n padding: 20px;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n min-height: 100px;\r\n }\r\n \r\n #text-preview {\r\n font-size: 34px;\r\n word-wrap: break-word;\r\n }\r\n \r\n .font-size-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .font-size-control input {\r\n flex: 1;\r\n }\r\n \r\n .explanation {\r\n margin-top: 30px;\r\n padding: 15px;\r\n background-color: #e9ecef;\r\n border-radius: 5px;\r\n font-size: 14px;\r\n }\r\n \r\n .code-example {\r\n background-color: #f8f9fa;\r\n padding: 15px;\r\n border-radius: 5px;\r\n font-family: monospace;\r\n margin-top: 15px;\r\n white-space: pre-wrap;\r\n font-size: 13px;\r\n }\r\n \r\n .font-category {\r\n margin-top: 10px;\r\n font-weight: bold;\r\n }\r\n \r\n \/* Exemplu de font personalizat \u00eenc\u0103rcat local pentru demo *\/\r\n @font-face {\r\n font-family: 'ExampleFont';\r\n src: local('Arial'); \/* Folosim Arial ca exemplu pentru simulare *\/\r\n font-weight: normal;\r\n font-style: normal;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <h1>Simulator de Text<\/h1>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"text-input\">Scrie aici textul:<\/label>\r\n <textarea id=\"text-input\" placeholder=\"Scrie aici literele...\"><\/textarea>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"font-selector\">Alege fontul:<\/label>\r\n <select id=\"font-selector\">\r\n <optgroup label=\"Fonturi de sistem (deja disponibile)\">\r\n <option value=\"Arial, sans-serif\">Arial<\/option>\r\n <option value=\"'Times New Roman', serif\">Times New Roman<\/option>\r\n <option value=\"'Courier New', monospace\">Courier New<\/option>\r\n <option value=\"Georgia, serif\">Georgia<\/option>\r\n <option value=\"Verdana, sans-serif\">Verdana<\/option>\r\n <option value=\"'Trebuchet MS', sans-serif\">Trebuchet MS<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Google Fonts (incluse \u00een demo)\">\r\n <option value=\"'Nunito', sans-serif\">Nunito<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Fonturile tale (vor trebui ad\u0103ugate)\">\r\n <option value=\"'Bahnschrift', sans-serif\">Bahnschrift<\/option>\r\n <option value=\"'Catallina', sans-serif\">Catallina<\/option>\r\n <option value=\"'Cleveland', sans-serif\">Cleveland<\/option>\r\n <option value=\"'Decomartt', sans-serif\">Decomartt<\/option>\r\n <option value=\"'DK Soerabaja', sans-serif\">DK Soerabaja<\/option>\r\n <option value=\"'Fonseca', sans-serif\">Fonseca<\/option>\r\n <option value=\"'Freida', sans-serif\">Freida<\/option>\r\n <option value=\"'Gaia', sans-serif\">Gaia<\/option>\r\n <option value=\"'Kabel', sans-serif\">Kabel<\/option>\r\n <option value=\"'Mouron', sans-serif\">Mouron<\/option>\r\n <option value=\"'Noir', sans-serif\">Noir<\/option>\r\n <option value=\"'Romantica', sans-serif\">Romantica<\/option>\r\n <option value=\"'Vilane Bold', sans-serif\">Vilane Bold<\/option>\r\n <option value=\"'VAG Rounded', sans-serif\">VAG Rounded<\/option>\r\n <option value=\"'Arial Black', sans-serif\">Arial Black<\/option>\r\n <option value=\"'Super Boom', sans-serif\">Super Boom<\/option>\r\n <option value=\"'Sonic XBD', sans-serif\">Sonic XBD<\/option>\r\n <option value=\"'Segoe UI Black', sans-serif\">Segoe UI Black<\/option>\r\n <option value=\"'Merry Christmas', sans-serif\">Merry Christmas<\/option>\r\n <option value=\"'Lithos Pro', sans-serif\">Lithos Pro<\/option>\r\n <option value=\"'Hubby Bunny', sans-serif\">Hubby Bunny<\/option>\r\n <option value=\"'HandelGothic', sans-serif\">HandelGothic<\/option>\r\n <option value=\"'Gill Sans Ultra Bold', sans-serif\">Gill Sans Ultra Bold<\/option>\r\n <option value=\"'Geometr415 Blk', sans-serif\">Geometr415 Blk<\/option>\r\n <option value=\"'Futura XBLKIT', sans-serif\">Futura XBLKIT<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Exemplu\">\r\n <option value=\"'ExampleFont', sans-serif\">ExampleFont (Simulare)<\/option>\r\n <\/optgroup>\r\n <\/select>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"color-picker\">Alege culoarea:<\/label>\r\n <input type=\"color\" id=\"color-picker\" value=\"#3f5e0a\">\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <label for=\"font-size\">M\u0103rime font:<\/label>\r\n <div class=\"font-size-control\">\r\n <input type=\"range\" id=\"font-size\" min=\"12\" max=\"72\" value=\"34\" step=\"1\">\r\n <span id=\"font-size-value\">34px<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"preview-container\">\r\n <div id=\"text-preview\">Textul t\u0103u va ap\u0103rea aici<\/div>\r\n <\/div>\r\n \r\n <div class=\"explanation\">\r\n <h3>Cum s\u0103 adaugi fonturile \u00een website-ul t\u0103u:<\/h3>\r\n <p>Pentru ca fonturile personalizate s\u0103 func\u021bioneze pe orice dispozitiv, trebuie s\u0103 le incluzi \u00een website. Iat\u0103 pa\u0219ii necesari:<\/p>\r\n \r\n <ol>\r\n <li><strong>Ob\u021bine fi\u0219ierele fonturilor<\/strong> - Ai nevoie de fi\u0219ierele (.woff2, .woff, .ttf) pentru fiecare font.<\/li>\r\n <li><strong>\u00cencarc\u0103 fonturile pe serverul t\u0103u<\/strong> - Creeaz\u0103 un folder \"fonts\" \u0219i \u00eencarc\u0103 fi\u0219ierele acolo.<\/li>\r\n <li><strong>Adaug\u0103 reguli @font-face \u00een CSS<\/strong> - Pentru fiecare font, adaug\u0103 o regul\u0103 @font-face.<\/li>\r\n <\/ol>\r\n \r\n <div class=\"font-category\">Exemplu de cod pentru a ad\u0103uga fonturile tale:<\/div>\r\n <div class=\"code-example\">\/* \u00cen fi\u0219ierul t\u0103u CSS *\/\r\n@font-face {\r\n font-family: 'Bahnschrift';\r\n src: url('fonts\/bahnschrift.woff2') format('woff2'),\r\n url('fonts\/bahnschrift.woff') format('woff'),\r\n url('fonts\/bahnschrift.ttf') format('truetype');\r\n font-weight: normal;\r\n font-style: normal;\r\n font-display: swap;\r\n}\r\n\r\n@font-face {\r\n font-family: 'Catallina';\r\n src: url('fonts\/catallina.woff2') format('woff2'),\r\n url('fonts\/catallina.woff') format('woff'),\r\n url('fonts\/catallina.ttf') format('truetype');\r\n font-weight: normal;\r\n font-style: normal;\r\n font-display: swap;\r\n}\r\n\r\n\/* Repet\u0103 pentru fiecare font *\/<\/div>\r\n \r\n <div class=\"font-category\">Surse pentru fonturile gratuite:<\/div>\r\n <ul>\r\n <li>Google Fonts (https:\/\/fonts.google.com\/)<\/li>\r\n <li>Font Squirrel (https:\/\/www.fontsquirrel.com\/)<\/li>\r\n <li>DaFont (https:\/\/www.dafont.com\/)<\/li>\r\n <\/ul>\r\n \r\n <div class=\"font-category\">Not\u0103 important\u0103:<\/div>\r\n <p>Asigur\u0103-te c\u0103 ai drepturile legale pentru a utiliza fonturile \u00een website-ul t\u0103u. Unele fonturi necesit\u0103 licen\u021be pentru utilizare comercial\u0103.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Get DOM elements\r\n const textInput = document.getElementById(\"text-input\");\r\n const fontSelector = document.getElementById(\"font-selector\");\r\n const colorPicker = document.getElementById(\"color-picker\");\r\n const fontSizeSlider = document.getElementById(\"font-size\");\r\n const fontSizeValue = document.getElementById(\"font-size-value\");\r\n const textPreview = document.getElementById(\"text-preview\");\r\n \r\n \/\/ Initialize\r\n updatePreview();\r\n \r\n \/\/ Add event listeners\r\n textInput.addEventListener(\"input\", updatePreview);\r\n fontSelector.addEventListener(\"change\", updatePreview);\r\n colorPicker.addEventListener(\"input\", updatePreview);\r\n fontSizeSlider.addEventListener(\"input\", updatePreview);\r\n \r\n \/\/ Update preview function\r\n function updatePreview() {\r\n const text = textInput.value || \"Textul t\u0103u va ap\u0103rea aici\";\r\n const fontFamily = fontSelector.value;\r\n const color = colorPicker.value;\r\n const fontSize = fontSizeSlider.value;\r\n \r\n textPreview.textContent = text;\r\n textPreview.style.fontFamily = fontFamily;\r\n textPreview.style.color = color;\r\n textPreview.style.fontSize = `${fontSize}px`;\r\n fontSizeValue.textContent = `${fontSize}px`;\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Simulator de Text cu Fonturi \u00cencorporate Simulator de Text Scrie aici textul: Alege fontul: ArialTimes New RomanCourier NewGeorgiaVerdanaTrebuchet MS Nunito BahnschriftCatallinaClevelandDecomarttDK SoerabajaFonsecaFreidaGaiaKabelMouronNoirRomanticaVilane BoldVAG RoundedArial BlackSuper BoomSonic XBDSegoe UI BlackMerry ChristmasLithos ProHubby BunnyHandelGothicGill Sans Ultra BoldGeometr415 BlkFutura XBLKIT ExampleFont (Simulare) Alege culoarea: M\u0103rime font: 34px Textul t\u0103u va ap\u0103rea aici Cum s\u0103 adaugi fonturile \u00een website-ul […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2404","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PdwL4v-CM","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/pages\/2404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/comments?post=2404"}],"version-history":[{"count":10,"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/pages\/2404\/revisions"}],"predecessor-version":[{"id":2416,"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/pages\/2404\/revisions\/2416"}],"wp:attachment":[{"href":"https:\/\/tehnoweb.ro\/en\/wp-json\/wp\/v2\/media?parent=2404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}