From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the
The main.js code should look something like this:
\n<\/p>\n\n
import \".\/style.css\";\n\ndocument.querySelector(\"#app\").innerHTML = `\n\n\n\n\n\n
This is where we use document.querySelector() to add content to the element we insert our content into using the id: #<\/p>\n\n
And the style.css code should look something like this:
\n<\/p>\n\nbody {\n font-family: 'Kyiv Sans';\n}\n\n@font-face {\n font-family: 'Kyiv Sans';\n src: url('\/font\/KyivTypeSans-VarGX.ttf');\n font-weight: 0 1000;\n font-display: swap;\n}\n\nh1 {\n color: #bd0c0c;\n height: 100vh;\n display: grid;\n place-content: center;\n margin: 0;\n text-align: center;\n}\n\n.variable-font {\n font-family: 'Kyiv Sans';\n font-size: 5rem;\n line-height: 1.1;\n font-weight: 100;\n font-variation-settings:\n 'wght' 100, 'CONT' 250, 'MIDL' 0;\n transition: font-variation-settings 500ms; \n}\n\n.variable-font:hover {\n font-weight: 1000;\n font-variation-settings:\n 'wght' 1000, 'CONT' 250, 'MIDL' -1000;\n}\n<\/pre>\n\n\n\nNow, let's explain what's going on in the code above:<\/p>\n\n
Setting the Default Font for the Body:<\/strong>
\n<\/p>npm create vite@latest\n<\/pre>\n\n\n\n\n
- \nPurpose<\/strong>: This sets the default font for the entire document to 'Kyiv Sans'.<\/li>\n
- \nImpact<\/strong>: All text elements within the body will inherit this font unless overridden by more specific styles.<\/li>\n<\/ul>\n\n
Defining the Custom Font:<\/strong>
\n<\/p>\n\nnpm run dev\n<\/pre>\n\n\n\n\n
- \nPurpose<\/strong>: The @font-face rule allows you to define a custom font.<\/li>\n
- \nFont Name<\/strong>: The font is named 'Kyiv Sans'.<\/li>\n
- \nSource<\/strong>: The font file is located at \/font\/KyivTypeSans-VarGX.ttf.<\/li>\n
- \nFont Weight Range<\/strong>: This font supports a range of weights from 0 to 1000, making it a variable font.<\/li>\n
- \nFont Display<\/strong>: swap ensures that text is displayed immediately using a fallback font until the custom font loads.<\/li>\n<\/ul>\n\n
Styling the
Element:
\n\n\n\n\n \n \n \n\nVariable font<\/title>\n <\/head>\n <body> <h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <div>\n\n\n\n<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>\n\n<p>The main.js code should look something like this:<br>\n<\/p>\n\n<pre>import \".\/style.css\";\n\ndocument.querySelector(\"#app\").innerHTML = `\n <div>\n <h1>\n\n\n\n<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #<\/p>\n\n<p>And the style.css code should look something like this:<br>\n<\/p>\n\n<pre>body {\n font-family: 'Kyiv Sans';\n}\n\n@font-face {\n font-family: 'Kyiv Sans';\n src: url('\/font\/KyivTypeSans-VarGX.ttf');\n font-weight: 0 1000;\n font-display: swap;\n}\n\nh1 {\n color: #bd0c0c;\n height: 100vh;\n display: grid;\n place-content: center;\n margin: 0;\n text-align: center;\n}\n\n.variable-font {\n font-family: 'Kyiv Sans';\n font-size: 5rem;\n line-height: 1.1;\n font-weight: 100;\n font-variation-settings:\n 'wght' 100, 'CONT' 250, 'MIDL' 0;\n transition: font-variation-settings 500ms; \n}\n\n.variable-font:hover {\n font-weight: 1000;\n font-variation-settings:\n 'wght' 1000, 'CONT' 250, 'MIDL' -1000;\n}\n<\/pre>\n\n\n\n<ul>\n<li>\n<strong>Color<\/strong>: Sets the text color to #bd0c0c, a shade of red.<\/li>\n<li>\n<strong>Height<\/strong>: The height is set to 100vh, making the <h1> element span the full height of the viewport.\n<\/pre><\/pre>\n<li>\n<strong>Display<\/strong>: grid is used for layout, allowing the use of grid properties.<\/li>\n<li>\n<strong>Centering Content<\/strong>: place-content: center centers the content both vertically and horizontally.<\/li>\n<li>\n<strong>Margin<\/strong>: Margin is set to 0 to remove any default spacing around the <h1>.<\/li>\n<li>\n<strong>Text Alignment<\/strong>: The text is centered horizontally.<\/li>\n\n\n<p><strong>Styling the .variable-font Class:<\/strong><br>\n<\/p>\n\n<pre>body {\n font-family: 'Kyiv Sans';\n}\n<\/pre>\n\n\n\n<ul>\n<li>\n<strong>Font Family<\/strong>: Uses 'Kyiv Sans' for the text.<\/li>\n<li>\n<strong>Font Size<\/strong>: Sets the font size to 5rem (relative to the root element’s font size).<\/li>\n<li>\n<strong>Line Height<\/strong>: 1.1 ensures a slight spacing between lines.<\/li>\n<li>\n<strong>Font Weight<\/strong>: Initially set to 100.<\/li>\n<li>\n<strong>Font Variation Settings<\/strong>: Utilizes custom variation settings for the variable font:\n\n<ul>\n<li>\n'wght' controls the weight (initially 100).<\/li>\n<li>\n'CONT' and 'MIDL' are custom axes for this font, initially set to 250 and 0, respectively.<\/li>\n<\/ul>\n\n\n<\/li>\n\n<li>\n\n<strong>Transition<\/strong>: Smoothly transitions the font variation settings over 500 milliseconds.<\/li>\n\n<\/ul>\n\n<p><strong>Adding Hover Effect for .variable-font:<\/strong><br>\n<\/p>\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<ul>\n<li>\n<strong>Font Weight on Hover<\/strong>: Changes to 1000 when the element is hovered over.<\/li>\n<li>\n<strong>Font Variation Settings on Hover<\/strong>: Updates the variation settings to:\n\n<ul>\n<li>\n'wght' to 1000\n<\/li>\n<li>\n'CONT' remains 250\n<\/li>\n<li>\n'MIDL' changes to -1000\n<\/li>\n<\/ul>\n\n\n<\/li>\n\n<li>\n\n<strong>Effect<\/strong>: Creates a dynamic and interactive visual effect when the user hovers over the text, highlighting the flexibility of the variable font.<\/li>\n\n<\/ul>\n\n<p>At the end of it we'll have our Result looking somewhat like this;<br>\n<img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173372755661469.jpg\" alt=\"Variable Fonts for Dynamic Typography\"><\/p>\n<h2>\n \n \n Creating Responsive Typography with Variable Fonts\n<\/h2>\n\n<p>By allowing designers to achieve perfect adaptation across many devices and screen sizes, responsive typography with varied fonts transforms online design. Unmatched versatility comes from variable fonts, which allow constant changes in font attributes including weight, width, and contrast within a single font file. Designers can dynamically change these font attributes to improve readability and aesthetic appeal using CSS and media queries, ensuring that text looks best on any device, from desktop monitors to cellphones. Because a single variable font can replace several stationary font files, it reduces the need for extensive font loading and improves website performance. This flexibility not only improves the user experience but also streamlines the design process. Without responsive typography—which becomes more appealing, efficient, and accessible with different fonts—modern web design cannot exist.<\/p>\n<h3>\n \n \n Media Queries: The Masters of Screen Size Adaptation\n<\/h3>\n\n<p>Media queries are a cornerstone of responsive web design, acting as the masters of screen size adaptation. Based on the features of the user's device—such as screen width, height, resolution, and orientation—they let designers apply particular CSS styles. Media searches help designers make sure a website looks and operates as best it can across a variety of devices, from laptops and desktop monitors to smartphones and tablets.<\/p>\n\n<p>Media queries' power resides in their capacity to produce flexible and fluid layouts that fit various screen sizes. Media queries let a designer change font sizes, alter grid layouts, and even hide or show certain items based on the viewport measurements. This ensures that the material maintains its aesthetic appeal and accessibility, regardless of the device in use.<\/p>\n\n<p>Media queries define breakpoints—specific places at which the layout adjusts to fit varying screen sizes. Targeting different devices, these breakpoints are set using min-width, max-width, and other CSS characteristics. For example, a media query might specify the use of a mobile-friendly layout for screen widths of 768 pixels or less and a different layout for larger displays.<\/p>\n<p>Incorporating media searches into web design improves accessibility and user experience. On all platforms, media queries assist in developing inclusive digital experiences by guaranteeing that text is readable, navigation is intuitive, and material is well organized. Any web designer hoping to create responsive, adaptable, and user-friendly websites must first learn media queries in the era of varied device use.<\/p>\n\n<p>Here's an example:<br>\n<\/p>\n\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>In this example, we used media queries to adjust the font-variation-settings and weight of our font based on screen size. For devices with a maximum width of 600px, the font size is reduced to 3rem. The weight and other variations are adjusted accordingly for :hover effects, For devices with a width between 601px and 1200px, the font size is set to 4rem, with adjusted weight and variations. For devices with a width of 1201px and above, the font size is 5rem, maintaining the original settings.<br>\nThese media queries ensure that the font adapts to different screen sizes, improving readability and the user experience across various devices.<\/p>\n\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173372755720318.jpg\" alt=\"Variable Fonts for Dynamic Typography\"><\/p>\n\n<p>The image above shows the display for Small screens<\/p>\n\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173372755876188.jpg\" alt=\"Variable Fonts for Dynamic Typography\"><\/p>\n\n<p>The image above shows the display for Medium screens<\/p>\n\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173372755953201.jpg\" alt=\"Variable Fonts for Dynamic Typography\"><\/p>\n\n<p>The image above shows the display for Large screens<\/p>\n<h3>\n \n \n Viewport Units: Making Layouts Fluid\n<\/h3>\n\n<p>Viewport units are a powerful tool in modern web design, enabling the creation of fluid and responsive layouts that adapt seamlessly to different screen sizes. Viewport units include vw (viewport width) and vh (viewport height), which are relative to the dimensions of the browser's viewport. One vw equals 1% of the viewport's width, and one vh equals 1% of the viewport's height. These units help designers guarantee that elements scale according to the size of the user's screen, therefore producing a more dynamic and adaptable design. Setting the font size, padding, or margins in viewport units, for example, lets text and objects resize automatically, therefore preserving a consistent look on several devices. This adaptability enhances the user experience by ensuring content remains readable and aesthetically pleasing, regardless of the site's display on a large desktop monitor or a small mobile screen. Viewport units let designers create adaptable layouts that move easily to fit the always-changing terrain of digital gadgets.<\/p>\n\n<p>Here's an example of how to use vw to adjust font size based on viewport width:<br>\n<\/p>\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>In this example, from the code above, the font-size property of .variable-font is set using viewport width vw units, making the text size responsive to the viewport's width.<\/p>\n\n<p>We can combine media searches and viewport units with varying font characteristics to create truly responsive typography that elegantly fits every device or screen size. This enables us to provide an outstanding user experience, independent of the method of access someone chooses for our website.<\/p>\n\n<h2>\n \n \n Advanced Typographic Effects with Variable Fonts\n<\/h2>\n\n<p>Variable fonts enable designers to create highly customized and dynamic text styles by opening up a new field of complex typographic effects. Designers can now create seamless transitions and unusual visual effects that were previously difficult with stationary fonts by continuously adjusting characteristics such as weight, width, and custom axes. The weight, contrast, and midline dynamically can be changed by adjusting the font, offering complex control over the text look. This adaptability is very strong in responsive design, in which typefaces can easily adjust to various screen sizes and orientations. Moreover, interactive animations allow text to respond to user actions such as hovering or clicking, producing intriguing and immersive encounters. Viewport units, combined with varying font characteristics, ensure that typography remains fluid and scalable, improving readability and appearance on all kinds of devices. Using these sophisticated features, designers can create visually striking digital material by stretching the possibilities of conventional typography. Let's explore some fascinating methods for stretching the bounds of online typography:<\/p>\n\n<h3>\n \n \n Fluid Typography\n<\/h3>\n\n<p>Fluid typography is a design method whereby text scales dynamically with the viewport's size, therefore offering a smooth and responsive reading experience across many devices. Viewport units, media searches, and changeable fonts let fluid typography ensure that text stays intelligible and visually balanced, independent of screen size. This method eliminates the need for fixed font sizes and allows for seamless changes, thereby improving readability and appearance in a way that fits very different display conditions.<\/p>\n\n<p>Here's an example:<br>\n<\/p>\n\n<pre>npm run dev\n<\/pre>\n\n\n\n<p>How it works:<\/p>\n\n<p><strong>calc() Function:<\/strong> This function generates a fluid scaling effect by combining relative units vw, with fixed values rem. font-size, for instance, calc(2rem 2vw) reacts to the viewport width and assures a base size.<\/p>\n\n<p><strong>Fluid Typography for Various Elements:<\/strong> Many elements such as h1, h2, and p guarantee text scaled suitably across devices using fluid typeography. The calc() function provides a base size with a scaling factor that changes with the viewport width.<\/p>\n<p><strong>Variable Fonts:<\/strong> By combining fluid typography with changeable fonts, you can achieve dynamic changes in text attributes depending on viewport size.<br>\nThis method guarantees that text stays aesthetically pleasing and readable across a large spectrum of devices and screen sizes.<\/p>\n\n<p>By animating text, kinetic typography gives it life and generates interesting and dynamic visual effects that enthrall viewers. This method adds motion and interaction by changing text attributes using JavaScript and CSS animations. Using a :hover effect to animate the font weight in our example with the variable font, we demonstrated kinetic typography—that is, seamlessly from lighter to bolder weights. This not only emphasizes the content but also shows how, with fluid, real-time changes, varying fonts may improve user interactions. Kinetic typography allows designers to improve the visual attractiveness and usability of their text, enhancing its fundamental role in an interactive and interesting digital environment.<\/p>\n\n<h3>\n \n \n Example: Animating Weight on Hover\n<\/h3>\n\n\n\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>Here, we use a smooth transition to animate the weight of the .variable-font element from regular 100 to bold 1000 on :hover, creating a subtle yet impactful effect.<\/p>\n\n<p>These are only a handful of the imaginative opportunities that different fonts offer. From dynamic animations to fluid layouts, there is ample opportunity for distinctive and intriguing typefaces. With a little inventiveness and CSS understanding, we can challenge web design norms and produce rather remarkable user experiences.<\/p>\n\n<h2>\n \n \n Conclusion\n<\/h2>\n\n<p>Variable fonts—best demonstrated by Kyiv Sans transform typography on the web by grouping several font styles into a single file. By lowering the number of HTTP queries, this invention simplifies processes, increases design flexibility, and boosts performance. Designers can fully utilize changeable fonts in CSS to produce responsive, dynamic typefaces that fit perfectly with various screen sizes and user interactions.<br>\nDesigners can create visually appealing and easily accessible typographic experiences using attributes such as weight, middle layer effects, and contrast, as well as responsive approaches such as media queries and viewport units. Variable fonts are a necessary tool for contemporary web design since their fluidity enables new directions for artistic expression.<\/p>\n<h2>\n \n \n Resources\n<\/h2>\n\n<ul>\n<li>Check out the live preview hosted on Netlify\n<\/li>\n<li>View Source code <\/li>\n<\/ul>\n\n<h2>\n \n \n References\n<\/h2>\n\n<ul>\n<li>variable fonts<\/li>\n<li>OpenType<\/li>\n<li>Kyiv Sans<\/li>\n<li>viewport<\/li>\n<li>typeface<\/li>\n<li>registered axes<\/li>\n<li>custom axes<\/li>\n<li>@font-face<\/li>\n<li>Type Network<\/li>\n<li>Font Squirrel<\/li>\n<li>\nAdobe Fonts?<\/li>\n<li>Font Spring<\/li>\n<li>Google fonts<\/li>\n<li>\nVfonts.com <\/li>\n<li>ttf<\/li>\n<li>\nwoff2 <\/li>\n<li>everythingfonts.com<\/li>\n<li>Behance.net<\/li>\n<li>media queries<\/li>\n<li>px<\/li>\n<li>rem<\/li>\n<li>\nvw <\/li>\n<li>\nvh <\/li>\n<li>calc()<\/li>\n<\/ul>\n\n\n \n\n \n "} </script> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <script>var V_PATH="/";window.onerror=function(){ return true; };</script> </head> <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2"> <link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css"> <header> <div id="377j5v51b" class="head"> <div id="377j5v51b" class="haed_left"> <div id="377j5v51b" class="haed_logo"> <a href="http://m.miracleart.cn/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="377j5v51b" class="head_nav"> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Community" class="head_nava head_nava-template1">Community</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a> <a href="http://m.miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a> <a href="http://m.miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a> <a href="http://m.miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a> <a href="http://m.miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a> <a href="http://m.miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a> <a href="http://m.miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a> <a href="http://m.miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a> <a href="http://m.miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://m.miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a> <div class="377j5v51b" id="dropdown-template1_3" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a> <a href="http://m.miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a> </div> <div id="377j5v51b" class="head_right"> <div id="377j5v51b" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">English<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="377j5v51b" id="dropdown-template" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a> <a href="javascript:;" title="English" class="languagechoosea">English</a> <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a> <a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a> <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a> <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a> <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a> <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a> </div> </div> </div> <span id="377j5v51b" class="head_right_line"></span> <div style="display: block;" id="login" class="haed_login "> <a href="javascript:;" title="Login" class="haed_logina ">Login</a> </div> <div style="display: block;" id="reg" class="head_signup login"> <a href="javascript:;" title="singup" class="head_signupa">singup</a> </div> </div> </div> </header> <main> <div id="377j5v51b" class="Article_Details_main"> <div id="377j5v51b" class="Article_Details_main1"> <div id="377j5v51b" class="Article_Details_main1M"> <div id="377j5v51b" class="phpgenera_Details_mainL1"> <a href="http://m.miracleart.cn/" title="Home" class="phpgenera_Details_mainL1a">Home</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://m.miracleart.cn/web-designer.html" class="phpgenera_Details_mainL1a">Web Front-end</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://m.miracleart.cn/css-tutorial.html" class="phpgenera_Details_mainL1a">CSS Tutorial</a> <img src="/static/imghw/top_right.png" alt="" /> <span>Variable Fonts for Dynamic Typography</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">Variable Fonts for Dynamic Typography</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://m.miracleart.cn/member/1468490.html" class="author_avatar"> <img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8170af62b832.png" src="/static/imghw/default1.png" alt="Barbara Streisand"> </a> <div id="377j5v51b" class="author_detail"> <a href="http://m.miracleart.cn/member/1468490.html" class="author_name">Barbara Streisand</a> </div> </div> </div> <span id="377j5v51b" class="Articlelist_txts_time">Dec 09, 2024 pm 02:59 PM</span> </div> </div> <hr /> <div id="377j5v51b" class="article_main php-article"> <div id="377j5v51b" class="article-list-left detail-content-wrap content"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3461856641"> </ins> <p>Do you find it tedious to keep track of several font files for various weights and styles? Creating distinct files for ordinary, bold, italic, and other font variations can be challenging for web designers. This complicates the creative process and clogs their workflow. How about combining all these variants into one file?</p> <p>That's where variable fonts come in. Variable fonts are a groundbreaking advancement in OpenType font technology that allows one font file to contain multiple variations, such as regular, bold, and italic. This implies that designers just need to work with one file to access all the various weights, styles, and widths they require. This invention makes it simple to constantly and easily modify characteristics like weight, width, and tilt, which streamlines the design process and fosters creative freedom.</p> <p>Using the Kyiv Sans font as an example, this article will look at the relevance of different fonts in CSS and demonstrate how important qualities like weight and even non-standard font variations like MIDL. Using these tools, we will learn how to produce dynamic and aesthetically stunning typography in CSS.</p> <h2> Introduction to Variable Fonts </h2> <p>Variable font technological architecture lets designers and developers instantly control these typographic characteristics using CSS, thus permitting exact changes to fit the particular requirements of a project. This improves web performance by greatly lowering load times and replacing many static font files with a single variable font file.</p> <p>With their degree of flexibility and accuracy formerly unheard of with conventional static font files, variable fonts constitute a major development in typographic technology. Unlike traditional fonts, which demand separate files for every style and weight, variable fonts capture several styles within one, scalable file. This is accomplished with the OpenType font style, which permits constant variation along one or more axes—such as weight, width, and optical size.</p> <h3> Benefits of Variable Fonts in CSS </h3> <p>We'll walk you through how to create dynamic and aesthetically pleasing CSS typography using these tools. Let's examine a few examples:</p> <p><strong>Efficiency:</strong> By combining several font styles into a single file, variable fonts minimize HTTP requests, speeding up page loads and overall efficiency.</p> <p><strong>Flexibility:</strong> Designers may precisely modify typography to fit different design contexts and user preferences because of their fine-grained control over properties like wght and custom properties like MIDL and CONT.</p> <p><strong>Smooth Transitions:</strong> Variable fonts allow for dynamic changes to font styles, avoiding abrupt switches between discrete font files. As a result, transitions between font styles are smooth and fluid.</p> <p><strong>Responsive Typography:</strong> Variable fonts enable responsive typography by allowing adjustments based on viewport size or other user-defined parameters, ensuring optimal legibility and aesthetic appeal across devices.</p> <p><strong>Dynamic Typography:</strong> Variable fonts provide real-time changes depending on user interaction or environmental conditions, therefore supporting dynamic, improving user involvement, and generating immersive experiences.</p> <p><strong>Accessibility:</strong> A wider range of typographic options allows text customization and modification to ensure legibility and readability across various devices and user preferences.</p> <p><strong>Aesthetics:</strong> On the web, variable fonts inspire creative design ideas and challenge typographic boundaries, opening up new opportunities for typographic expression and experimentation.</p> <p><strong>Scalability:</strong> Variable fonts are perfect for responsive design and guarantee that text is clear and legible at any size or resolution since they are scalable without quality loss.</p> <h3> Introduction to the concept of responsive and dynamic typography using variable fonts </h3> <p>Modern web design allows designers to create more flexible and captivating typographic experiences using responsive and dynamic typography with changing fonts, let us dissect the ideas:</p> <p>Variables in Fonts: Variable fonts are a single font file with several variants of a typeface, including wght and special properties MIDL and CONT. Variable fonts give more freedom and efficiency in typography design than conventional fonts, which demand distinct files for every style and enable fluid transitions between these variants.</p> <p><strong>Responsive Typography:</strong> Designing text to fit easily into many screen sizes, resolutions, and viewing environments is known as responsive typography. From big desktop computers to cellphones and everything in between, this guarantees the best readability and aesthetics across many devices. Dynamic font size, line spacing, and other typographic changes help responsive typography improve the user experience and accessibility.</p> <p><strong>Dynamic Typography:</strong> Dynamic typography enhances responsive typography by incorporating interaction and animation into typographic design. JavaScript and CSS (Cascading Style Sheets) help designers develop typefaces that suit content changes, user interactions, or scrolling behavior. Dynamic typography uses components like wght, MIDL, and CONT to generate visual attractiveness and interactivity, guiding users' attention and catching them.</p> <p>Designers create rich, versatile, and immersive online typographic experiences by combining dynamic and flexible typography methods with varying fonts. Whether it's dynamically changing typeface in response to user activity, animating text elements to highlight important information, or adjusting font weight and size based on screen dimensions, this approach offers many chances for creativity and invention in digital design.</p> <p>The various font properties of Kyiv Sans allow designers to create intriguing and flawless typographic transitions. This enhances the interaction and user-friendliness of web materials by increasing their aesthetic appeal and utility.</p> <h2> Understanding Variable Font Properties </h2> <p>Various typefaces offer a range of new characteristics that are absent in traditional static fonts. Knowing these characteristics is necessary to use the full potential of changeable typefaces. These are some basic ones:</p> <p><strong>Weight (wght):</strong> By varying their wght along a continuous axis, variable typefaces enable seamless transitions between several thickness levels. Designers can indicate a range of weights within a single font file, from light to ultra-bold and, all points in between.</p> <p><strong>Middle Layer Effect (MIDL):</strong> This custom axis lets designers change a middle layer effect within the typeface. This can give the text a distinctive visual style, as well as an extra degree of design freedom and inventiveness.</p> <p><strong>Contrast (CONT):</strong> Another custom axis is CONT, which lets the font's contrast be changed. By dynamically altering the contrast depending on design requirements, this can help maximize the readability and visual attractiveness of the text.</p> <p>Understanding and applying these qualities will help designers produce visually striking typefaces. With its varied font characteristics, Kyiv Sans presents special customizing choices that improve the usability and appearance of web typography.</p> <h3> Overview of additional axes and variations available in variable fonts </h3> <p>Beyond the conventional weight, width, and optical size modifications, variable fonts provide a broad spectrum of personalizing choices. Below is a summary of the axes and variants that might be available:</p> <p>Several registered axes that variable font designers may use are defined by the OpenType specification:</p> <ul> <li><p>Width (wdth): This axis controls the horizontal expansion or condensation of the font, enabling designers to modify the width of characters. By adjusting this axis, designers can create fonts that appear narrower or wider without altering the overall height, allowing for a flexible range of condensed to extended styles.</p></li> <li><p>Slant (slnt): This axis allows designers to apply an italic-like slant to the characters without altering the letterforms’ structure. The slant axis typically mimics the effect of traditional italics but retains the upright letterforms, making it useful for creating stylistic variations.</p></li> <li><p>Italic (ital): The italic axis switches between upright and italic versions of a typeface. Unlike the slant axis, which only tilts the characters, the italic axis involves a complete redesign of the characters to reflect the cursive nature of true italics, providing a more authentic italic style.</p></li> <li><p>Optical Size (opsz): This axis adjusts the font’s design to optimize readability at different sizes. For example, smaller sizes may feature thicker strokes and more open counters for better legibility, while larger sizes can be more refined and delicate. This axis is particularly useful for responsive typography across various media.</p></li> <li><p>Grade (GRAD): The grade axis allows subtle adjustments to the font’s stroke weight without affecting the overall spacing. It is useful for improving readability in different print or screen environments, where a slight increase or decrease in weight can enhance contrast and clarity.</p></li> <li><p>Contrast (CNTR): This axis modifies the contrast between thick and thin strokes within a font. By adjusting the contrast, designers can create fonts with varying levels of emphasis and visual impact, from low-contrast, humanist styles to high-contrast, modern designs.</p></li> <li><p>X-height (xhgt): This axis adjusts the height of lowercase letters in relation to the font’s capital letters. Increasing the x-height can improve legibility at small sizes or create a more modern appearance while decreasing it can evoke a more traditional or formal feel.</p></li> </ul> <p>Apart from the registered axes, variable font creators may specify their own custom axes. Regarding Kyiv Sans: these comprise:</p> <ul> <li><p>Middle Layer Effect (MIDL): This custom axis gives designers more design versatility and allows them to change a specific middle layer effect inside the typeface, thereby adding original style aspects.</p></li> <li><p>Contrast (CONT): This custom axis helps to control the contrast between thick and thin strokes in the letterforms. Designers can dynamically change this characteristic to achieve a variety of degrees of typographic expressiveness, from subdued contrasts to more obvious variances.</p></li> </ul> <p>Aside from the registered axes, the option to construct new axes allows font designers to achieve a high degree of customization and sophisticated control over a font’s appearance and traits. Custom axes like MIDL and CONT, for instance, enable designers to tailor the font’s special qualities, resulting in flexible and expressive typography. These customizations, combined with variable font registration, offer numerous ways to create diverse typographic effects. For example, the Middle Layer Effect (MIDL) axis lets designers alter a unique middle layer within the typeface, adding distinctive visual qualities that enhance artistic freedom. The Contrast (CONT) axis, on the other hand, controls the variation between thick and thin strokes, allowing for dynamic adjustments that range from subtle to pronounced contrasts. By interacting with axes like Weight and Middle Layer Effect, designers can create text with varying thicknesses and unique styles, achieving precise control over the typeface’s appearance. Similarly, combining variations in Weight and Contrast enables the creation of text with different degrees of boldness and stroke contrast, balancing visual impact with readability. These examples demonstrate the unmatched freedom that both registered and custom axes provide, empowering designers to align typefaces with their specific aesthetic preferences and design objectives.</p> <h2> Implementing Variable Fonts in CSS </h2> <p>Now that you're enthralled with the possibilities of changeable fonts, let's investigate how to apply them in CSS-based web projects. CSS offers the means to properly use these adaptable typefaces' capabilities. Define the font first with @font-face, which lets you provide the varying font file and its characteristics. Once the font is set, you can dynamically change the font's axes using different CSS attributes, thus maximizing the possibilities provided by varying fonts.</p> <h3> Obtaining the font </h3> <p>First, we must download the variable font we want for our project.<br> A few websites on the internet allow us to access varying font files. Some of the most frequently used font websites are as follows:</p> <ul> <li>Type Network</li> <li>Font Squirrel</li> <li> Adobe Fonts?</li> <li>Font Spring</li> <li>Google fonts</li> <li>Vfonts.com</li> </ul> <p>For this example, we’ll go to Vfonts.com to download our Kyiv Sans variable font. The ttf or woff2 file format works fine, but we'll be using a ttf in this demonstration. If you need to convert your font file from ttf to woff2, then head to everythingfonts.com:</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755444094.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <p>The screenshot above shows what you'll see when you arrive at Vfont.</p> <p>We divide the project into the following steps:</p> <ol> <li><p>Navigate to vfont: Visit the website where variable font resources are available.</p></li> <li><p>Select Kyiv* Type: Choose the Kyiv* Type font, which will redirect you to Behance.net where the font is hosted.</p></li> <li><p>Access the Download Link: On the Behance page, scroll all the way down to find a link to download the font.</p></li> <li><p>Download from Google Drive: Click on the download link, which will take you to a Google Drive folder. Download the font file from there.</p></li> <li><p>Unzip the File: After downloading, unzip the file to access its contents.</p></li> <li> <p>Review Font Options: The unzipped folder contains several options to choose from.</p> <ul> <li>Icons</li> <li>No variable</li> <li>Variable</li> </ul> </li> <li> <p>Select the variable font: Focus on the files that include the variable font.</p> <ul> <li>Serif</li> <li>Tilting</li> <li>Sans</li> </ul> </li> <li><p>Use the Sans Font: Set up and use the Sans version of the font. Note that the Sans font weight file is 360 KB, which is equivalent to using eight non-variable font files.</p></li> <li><p>Evaluate the trade-off: Consider if the use of variable fonts is worthwhile for your project. If you only need regular, bold, and italic styles, it might not be necessary to use variable fonts. However, if you require advanced control over variations, variable fonts can be very beneficial.</p></li> </ol> <p>Note: These files above are in TTF format.</p> <p>Now we're going to head to VSCode, where we'll be using a vanilla vite project.<br> To begin working on the project, you must install the necessary packages. You have to follow the steps below:</p> <ol> <li><p>Open a new terminal.</p></li> <li> <p>Run the command<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> </li> <li><p>Name your project.</p></li> <li><p>Name your package.</p></li> <li><p>Select a Vanilla framework.</p></li> <li><p>Select the JavaScript variant.</p></li> <li><p>Running npm install will help you negotiate into the project and install the necessary modules.</p></li> <li> <p>After setting up the dependencies, use the following command to launch the application:<br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> </li> <li><p>Visit http://localhost:your-port-number to access the running program on your browser.</p></li> </ol> <p>Once we complete our project, we will have a wealth of mock code that we can modify to build our intended application. The downloaded variable font should be dropped into a font folder, which will be dropped in the public folder. We’ll be replacing all the unnecessary mock code in style.css, main.js, ?and index.html.</p> <p>The index.html code should look something like this:<br> </p> <pre class="brush:php;toolbar:false"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Variable font</title> </head> <body> <div> <p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div> <p>The main.js code should look something like this:<br> </p> <pre class="brush:php;toolbar:false">import "./style.css"; document.querySelector("#app").innerHTML = ` <div> <h1> <p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p> <p>And the style.css code should look something like this:<br> </p> <pre class="brush:php;toolbar:false">body { font-family: 'Kyiv Sans'; } @font-face { font-family: 'Kyiv Sans'; src: url('/font/KyivTypeSans-VarGX.ttf'); font-weight: 0 1000; font-display: swap; } h1 { color: #bd0c0c; height: 100vh; display: grid; place-content: center; margin: 0; text-align: center; } .variable-font { font-family: 'Kyiv Sans'; font-size: 5rem; line-height: 1.1; font-weight: 100; font-variation-settings: 'wght' 100, 'CONT' 250, 'MIDL' 0; transition: font-variation-settings 500ms; } .variable-font:hover { font-weight: 1000; font-variation-settings: 'wght' 1000, 'CONT' 250, 'MIDL' -1000; } </pre> <p>Now, let's explain what's going on in the code above:</p> <p><strong>Setting the Default Font for the Body:</strong><br> </p><pre class="brush:php;toolbar:false">npm create vite@latest </pre> <ul> <li> <strong>Purpose</strong>: This sets the default font for the entire document to 'Kyiv Sans'.</li> <li> <strong>Impact</strong>: All text elements within the body will inherit this font unless overridden by more specific styles.</li> </ul> <p><strong>Defining the Custom Font:</strong><br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> <ul> <li> <strong>Purpose</strong>: The @font-face rule allows you to define a custom font.</li> <li> <strong>Font Name</strong>: The font is named 'Kyiv Sans'.</li> <li> <strong>Source</strong>: The font file is located at /font/KyivTypeSans-VarGX.ttf.</li> <li> <strong>Font Weight Range</strong>: This font supports a range of weights from 0 to 1000, making it a variable font.</li> <li> <strong>Font Display</strong>: swap ensures that text is displayed immediately using a fallback font until the custom font loads.</li> </ul> <p><strong>Styling the <h1> Element:<br> <pre class="brush:php;toolbar:false"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Variable font</title> </head> <body> <div> <p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div> <p>The main.js code should look something like this:<br> </p> <pre class="brush:php;toolbar:false">import "./style.css"; document.querySelector("#app").innerHTML = ` <div> <h1> <p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p> <p>And the style.css code should look something like this:<br> </p> <pre class="brush:php;toolbar:false">body { font-family: 'Kyiv Sans'; } @font-face { font-family: 'Kyiv Sans'; src: url('/font/KyivTypeSans-VarGX.ttf'); font-weight: 0 1000; font-display: swap; } h1 { color: #bd0c0c; height: 100vh; display: grid; place-content: center; margin: 0; text-align: center; } .variable-font { font-family: 'Kyiv Sans'; font-size: 5rem; line-height: 1.1; font-weight: 100; font-variation-settings: 'wght' 100, 'CONT' 250, 'MIDL' 0; transition: font-variation-settings 500ms; } .variable-font:hover { font-weight: 1000; font-variation-settings: 'wght' 1000, 'CONT' 250, 'MIDL' -1000; } </pre> <ul> <li> <strong>Color</strong>: Sets the text color to #bd0c0c, a shade of red.</li> <li> <strong>Height</strong>: The height is set to 100vh, making the <h1> element span the full height of the viewport. </pre></pre> <li> <strong>Display</strong>: grid is used for layout, allowing the use of grid properties.</li> <li> <strong>Centering Content</strong>: place-content: center centers the content both vertically and horizontally.</li> <li> <strong>Margin</strong>: Margin is set to 0 to remove any default spacing around the <h1>.</li> <li> <strong>Text Alignment</strong>: The text is centered horizontally.</li> <p><strong>Styling the .variable-font Class:</strong><br> </p> <pre class="brush:php;toolbar:false">body { font-family: 'Kyiv Sans'; } </pre> <ul> <li> <strong>Font Family</strong>: Uses 'Kyiv Sans' for the text.</li> <li> <strong>Font Size</strong>: Sets the font size to 5rem (relative to the root element’s font size).</li> <li> <strong>Line Height</strong>: 1.1 ensures a slight spacing between lines.</li> <li> <strong>Font Weight</strong>: Initially set to 100.</li> <li> <strong>Font Variation Settings</strong>: Utilizes custom variation settings for the variable font: <ul> <li> 'wght' controls the weight (initially 100).</li> <li> 'CONT' and 'MIDL' are custom axes for this font, initially set to 250 and 0, respectively.</li> </ul> </li> <li> <strong>Transition</strong>: Smoothly transitions the font variation settings over 500 milliseconds.</li> </ul> <p><strong>Adding Hover Effect for .variable-font:</strong><br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <ul> <li> <strong>Font Weight on Hover</strong>: Changes to 1000 when the element is hovered over.</li> <li> <strong>Font Variation Settings on Hover</strong>: Updates the variation settings to: <ul> <li> 'wght' to 1000 </li> <li> 'CONT' remains 250 </li> <li> 'MIDL' changes to -1000 </li> </ul> </li> <li> <strong>Effect</strong>: Creates a dynamic and interactive visual effect when the user hovers over the text, highlighting the flexibility of the variable font.</li> </ul> <p>At the end of it we'll have our Result looking somewhat like this;<br> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755661469.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <h2> Creating Responsive Typography with Variable Fonts </h2> <p>By allowing designers to achieve perfect adaptation across many devices and screen sizes, responsive typography with varied fonts transforms online design. Unmatched versatility comes from variable fonts, which allow constant changes in font attributes including weight, width, and contrast within a single font file. Designers can dynamically change these font attributes to improve readability and aesthetic appeal using CSS and media queries, ensuring that text looks best on any device, from desktop monitors to cellphones. Because a single variable font can replace several stationary font files, it reduces the need for extensive font loading and improves website performance. This flexibility not only improves the user experience but also streamlines the design process. Without responsive typography—which becomes more appealing, efficient, and accessible with different fonts—modern web design cannot exist.</p> <h3> Media Queries: The Masters of Screen Size Adaptation </h3> <p>Media queries are a cornerstone of responsive web design, acting as the masters of screen size adaptation. Based on the features of the user's device—such as screen width, height, resolution, and orientation—they let designers apply particular CSS styles. Media searches help designers make sure a website looks and operates as best it can across a variety of devices, from laptops and desktop monitors to smartphones and tablets.</p> <p>Media queries' power resides in their capacity to produce flexible and fluid layouts that fit various screen sizes. Media queries let a designer change font sizes, alter grid layouts, and even hide or show certain items based on the viewport measurements. This ensures that the material maintains its aesthetic appeal and accessibility, regardless of the device in use.</p> <p>Media queries define breakpoints—specific places at which the layout adjusts to fit varying screen sizes. Targeting different devices, these breakpoints are set using min-width, max-width, and other CSS characteristics. For example, a media query might specify the use of a mobile-friendly layout for screen widths of 768 pixels or less and a different layout for larger displays.</p> <p>Incorporating media searches into web design improves accessibility and user experience. On all platforms, media queries assist in developing inclusive digital experiences by guaranteeing that text is readable, navigation is intuitive, and material is well organized. Any web designer hoping to create responsive, adaptable, and user-friendly websites must first learn media queries in the era of varied device use.</p> <p>Here's an example:<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>In this example, we used media queries to adjust the font-variation-settings and weight of our font based on screen size. For devices with a maximum width of 600px, the font size is reduced to 3rem. The weight and other variations are adjusted accordingly for :hover effects, For devices with a width between 601px and 1200px, the font size is set to 4rem, with adjusted weight and variations. For devices with a width of 1201px and above, the font size is 5rem, maintaining the original settings.<br> These media queries ensure that the font adapts to different screen sizes, improving readability and the user experience across various devices.</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755720318.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <p>The image above shows the display for Small screens</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755876188.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <p>The image above shows the display for Medium screens</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755953201.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <p>The image above shows the display for Large screens</p> <h3> Viewport Units: Making Layouts Fluid </h3> <p>Viewport units are a powerful tool in modern web design, enabling the creation of fluid and responsive layouts that adapt seamlessly to different screen sizes. Viewport units include vw (viewport width) and vh (viewport height), which are relative to the dimensions of the browser's viewport. One vw equals 1% of the viewport's width, and one vh equals 1% of the viewport's height. These units help designers guarantee that elements scale according to the size of the user's screen, therefore producing a more dynamic and adaptable design. Setting the font size, padding, or margins in viewport units, for example, lets text and objects resize automatically, therefore preserving a consistent look on several devices. This adaptability enhances the user experience by ensuring content remains readable and aesthetically pleasing, regardless of the site's display on a large desktop monitor or a small mobile screen. Viewport units let designers create adaptable layouts that move easily to fit the always-changing terrain of digital gadgets.</p> <p>Here's an example of how to use vw to adjust font size based on viewport width:<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>In this example, from the code above, the font-size property of .variable-font is set using viewport width vw units, making the text size responsive to the viewport's width.</p> <p>We can combine media searches and viewport units with varying font characteristics to create truly responsive typography that elegantly fits every device or screen size. This enables us to provide an outstanding user experience, independent of the method of access someone chooses for our website.</p> <h2> Advanced Typographic Effects with Variable Fonts </h2> <p>Variable fonts enable designers to create highly customized and dynamic text styles by opening up a new field of complex typographic effects. Designers can now create seamless transitions and unusual visual effects that were previously difficult with stationary fonts by continuously adjusting characteristics such as weight, width, and custom axes. The weight, contrast, and midline dynamically can be changed by adjusting the font, offering complex control over the text look. This adaptability is very strong in responsive design, in which typefaces can easily adjust to various screen sizes and orientations. Moreover, interactive animations allow text to respond to user actions such as hovering or clicking, producing intriguing and immersive encounters. Viewport units, combined with varying font characteristics, ensure that typography remains fluid and scalable, improving readability and appearance on all kinds of devices. Using these sophisticated features, designers can create visually striking digital material by stretching the possibilities of conventional typography. Let's explore some fascinating methods for stretching the bounds of online typography:</p> <h3> Fluid Typography </h3> <p>Fluid typography is a design method whereby text scales dynamically with the viewport's size, therefore offering a smooth and responsive reading experience across many devices. Viewport units, media searches, and changeable fonts let fluid typography ensure that text stays intelligible and visually balanced, independent of screen size. This method eliminates the need for fixed font sizes and allows for seamless changes, thereby improving readability and appearance in a way that fits very different display conditions.</p> <p>Here's an example:<br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> <p>How it works:</p> <p><strong>calc() Function:</strong> This function generates a fluid scaling effect by combining relative units vw, with fixed values rem. font-size, for instance, calc(2rem 2vw) reacts to the viewport width and assures a base size.</p> <p><strong>Fluid Typography for Various Elements:</strong> Many elements such as h1, h2, and p guarantee text scaled suitably across devices using fluid typeography. The calc() function provides a base size with a scaling factor that changes with the viewport width.</p> <p><strong>Variable Fonts:</strong> By combining fluid typography with changeable fonts, you can achieve dynamic changes in text attributes depending on viewport size.<br> This method guarantees that text stays aesthetically pleasing and readable across a large spectrum of devices and screen sizes.</p> <p>By animating text, kinetic typography gives it life and generates interesting and dynamic visual effects that enthrall viewers. This method adds motion and interaction by changing text attributes using JavaScript and CSS animations. Using a :hover effect to animate the font weight in our example with the variable font, we demonstrated kinetic typography—that is, seamlessly from lighter to bolder weights. This not only emphasizes the content but also shows how, with fluid, real-time changes, varying fonts may improve user interactions. Kinetic typography allows designers to improve the visual attractiveness and usability of their text, enhancing its fundamental role in an interactive and interesting digital environment.</p> <h3> Example: Animating Weight on Hover </h3> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>Here, we use a smooth transition to animate the weight of the .variable-font element from regular 100 to bold 1000 on :hover, creating a subtle yet impactful effect.</p> <p>These are only a handful of the imaginative opportunities that different fonts offer. From dynamic animations to fluid layouts, there is ample opportunity for distinctive and intriguing typefaces. With a little inventiveness and CSS understanding, we can challenge web design norms and produce rather remarkable user experiences.</p> <h2> Conclusion </h2> <p>Variable fonts—best demonstrated by Kyiv Sans transform typography on the web by grouping several font styles into a single file. By lowering the number of HTTP queries, this invention simplifies processes, increases design flexibility, and boosts performance. Designers can fully utilize changeable fonts in CSS to produce responsive, dynamic typefaces that fit perfectly with various screen sizes and user interactions.<br> Designers can create visually appealing and easily accessible typographic experiences using attributes such as weight, middle layer effects, and contrast, as well as responsive approaches such as media queries and viewport units. Variable fonts are a necessary tool for contemporary web design since their fluidity enables new directions for artistic expression.</p> <h2> Resources </h2> <ul> <li>Check out the live preview hosted on Netlify </li> <li>View Source code </li> </ul> <h2> References </h2> <ul> <li>variable fonts</li> <li>OpenType</li> <li>Kyiv Sans</li> <li>viewport</li> <li>typeface</li> <li>registered axes</li> <li>custom axes</li> <li>@font-face</li> <li>Type Network</li> <li>Font Squirrel</li> <li> Adobe Fonts?</li> <li>Font Spring</li> <li>Google fonts</li> <li> Vfonts.com </li> <li>ttf</li> <li> woff2 </li> <li>everythingfonts.com</li> <li>Behance.net</li> <li>media queries</li> <li>px</li> <li>rem</li> <li> vw </li> <li> vh </li> <li>calc()</li> </ul> <p>The above is the detailed content of Variable Fonts for Dynamic Typography. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">Statement of this Website</div> <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <div id="377j5v51b" class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <!-- <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Article</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 weeks ago</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 weeks ago</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/article.html">Show More</a> </div> </div> </div> --> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot AI Tools</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Undress images for free</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>AI-powered app for creating realistic nude photos</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Online AI tool for removing clothes from photos.</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI clothes remover</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ai">Show More</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Article</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 weeks ago</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 weeks ago</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/article.html">Show More</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot Tools</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Easy-to-use and free code editor</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Chinese version</h3> </a> <p>Chinese version, very easy to use</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Zend Studio 13.0.1</h3> </a> <p>Powerful PHP integrated development environment</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Visual web development tools</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac version</h3> </a> <p>God-level code editing software (SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ai">Show More</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Topics</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>8634</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>17</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1783</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>16</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1722</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>56</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1577</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>28</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1438</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>31</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/faq/zt">Show More</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main2"> <div id="377j5v51b" class="phpgenera_Details_mainL4"> <div id="377j5v51b" class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div id="377j5v51b" class="phpgenera_Details_mainL4_info"> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/faq/1796823628.html" title="What is 'render-blocking CSS'?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is 'render-blocking CSS'?" /> </a> <a href="http://m.miracleart.cn/faq/1796823628.html" title="What is 'render-blocking CSS'?" class="phphistorical_Version2_mids_title">What is 'render-blocking CSS'?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span> <p class="Articlelist_txts_p">CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/faq/1796820543.html" title="How to use Lotties in Figma" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174986743677204.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to use Lotties in Figma" /> </a> <a href="http://m.miracleart.cn/faq/1796820543.html" title="How to use Lotties in Figma" class="phphistorical_Version2_mids_title">How to use Lotties in Figma</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 14, 2025 am 10:17 AM</span> <p class="Articlelist_txts_p">In the following tutorial, I will show you how to create Lottie animations in Figma. We'll use two colorful designs to exmplify how you can animate in Figma, and then I'll show you how to go from Figma to Lottie animations. All you need is a free Fig</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="External vs. Internal CSS: What's the Best Approach?" /> </a> <a href="http://m.miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" class="phphistorical_Version2_mids_title">External vs. Internal CSS: What's the Best Approach?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span> <p class="Articlelist_txts_p">ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/faq/1796821588.html" title="Does my CSS must be on lower case?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Does my CSS must be on lower case?" /> </a> <a href="http://m.miracleart.cn/faq/1796821588.html" title="Does my CSS must be on lower case?" class="phphistorical_Version2_mids_title">Does my CSS must be on lower case?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span> <p class="Articlelist_txts_p">No,CSSdoesnothavetobeinlowercase.However,usinglowercaseisrecommendedfor:1)Consistencyandreadability,2)Avoidingerrorsinrelatedtechnologies,3)Potentialperformancebenefits,and4)Improvedcollaborationwithinteams.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS Case Sensitivity: Understanding What Matters" /> </a> <a href="http://m.miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" class="phphistorical_Version2_mids_title">CSS Case Sensitivity: Understanding What Matters</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span> <p class="Articlelist_txts_p">CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is Autoprefixer and how does it work?" /> </a> <a href="http://m.miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" class="phphistorical_Version2_mids_title">What is Autoprefixer and how does it work?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span> <p class="Articlelist_txts_p">Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/faq/1796821606.html" title="What are CSS counters?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What are CSS counters?" /> </a> <a href="http://m.miracleart.cn/faq/1796821606.html" title="What are CSS counters?" class="phphistorical_Version2_mids_title">What are CSS counters?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span> <p class="Articlelist_txts_p">CSScounterscanautomaticallynumbersectionsandlists.1)Usecounter-resettoinitialize,counter-incrementtoincrease,andcounter()orcounters()todisplayvalues.2)CombinewithJavaScriptfordynamiccontenttoensureaccurateupdates.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/faq/1796821580.html" title="CSS: When Does Case Matter (and When Doesn't)?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: When Does Case Matter (and When Doesn't)?" /> </a> <a href="http://m.miracleart.cn/faq/1796821580.html" title="CSS: When Does Case Matter (and When Doesn't)?" class="phphistorical_Version2_mids_title">CSS: When Does Case Matter (and When Doesn't)?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span> <p class="Articlelist_txts_p">In CSS, selector and attribute names are case-sensitive, while values, named colors, URLs, and custom attributes are case-sensitive. 1. The selector and attribute names are case-insensitive, such as background-color and background-Color are the same. 2. The hexadecimal color in the value is case-sensitive, but the named color is case-sensitive, such as red and Red is invalid. 3. URLs are case sensitive and may cause file loading problems. 4. Custom properties (variables) are case sensitive, and you need to pay attention to the consistency of case when using them.</p> </div> </div> <a href="http://m.miracleart.cn/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div id="377j5v51b" class="footer"> <div id="377j5v51b" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Public welfare online PHP training，Help PHP learners grow quickly！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://m.miracleart.cn/about/us.html">About us</a> <a href="http://m.miracleart.cn/about/disclaimer.html">Disclaimer</a> <a href="http://m.miracleart.cn/update/article_0_1.html">Sitemap</a> </div> <div id="377j5v51b" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://m.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="ajkpk" class="pl_css_ganrao" style="display: none;"><thead id="ajkpk"></thead><u id="ajkpk"></u><sup id="ajkpk"><strong id="ajkpk"></strong></sup><noframes id="ajkpk"><rt id="ajkpk"><small id="ajkpk"></small></rt></noframes><progress id="ajkpk"></progress><address id="ajkpk"></address><tt id="ajkpk"></tt><pre id="ajkpk"><samp id="ajkpk"><i id="ajkpk"><meter id="ajkpk"></meter></i></samp></pre><del id="ajkpk"><p id="ajkpk"><rp id="ajkpk"><label id="ajkpk"></label></rp></p></del><u id="ajkpk"><legend id="ajkpk"></legend></u><meter id="ajkpk"><th id="ajkpk"></th></meter><form id="ajkpk"><strong id="ajkpk"><dd id="ajkpk"><strong id="ajkpk"></strong></dd></strong></form><div id="ajkpk"><nobr id="ajkpk"><tr id="ajkpk"><dfn id="ajkpk"></dfn></tr></nobr></div><dfn id="ajkpk"></dfn><strong id="ajkpk"><em id="ajkpk"><input id="ajkpk"><em id="ajkpk"></em></input></em></strong><legend id="ajkpk"><li id="ajkpk"><dl id="ajkpk"><ruby id="ajkpk"></ruby></dl></li></legend><thead id="ajkpk"></thead><mark id="ajkpk"><listing id="ajkpk"><pre id="ajkpk"></pre></listing></mark><acronym id="ajkpk"></acronym><output id="ajkpk"><fieldset id="ajkpk"><center id="ajkpk"><label id="ajkpk"></label></center></fieldset></output><legend id="ajkpk"><ruby id="ajkpk"></ruby></legend><form id="ajkpk"><strong id="ajkpk"></strong></form><s id="ajkpk"><b id="ajkpk"><thead id="ajkpk"><abbr id="ajkpk"></abbr></thead></b></s><mark id="ajkpk"></mark><thead id="ajkpk"></thead><source id="ajkpk"></source><legend id="ajkpk"><label id="ajkpk"><legend id="ajkpk"><bdo id="ajkpk"></bdo></legend></label></legend><ins id="ajkpk"></ins><legend id="ajkpk"><ruby id="ajkpk"></ruby></legend><strike id="ajkpk"><ins id="ajkpk"><dfn id="ajkpk"><pre id="ajkpk"></pre></dfn></ins></strike><sub id="ajkpk"></sub><dfn id="ajkpk"></dfn><center id="ajkpk"><optgroup id="ajkpk"></optgroup></center><source id="ajkpk"><dfn id="ajkpk"><div id="ajkpk"></div></dfn></source><legend id="ajkpk"></legend><ul id="ajkpk"><strike id="ajkpk"></strike></ul><sup id="ajkpk"><b id="ajkpk"></b></sup><optgroup id="ajkpk"></optgroup><rp id="ajkpk"><label id="ajkpk"><tt id="ajkpk"></tt></label></rp><small id="ajkpk"><tfoot id="ajkpk"></tfoot></small><font id="ajkpk"><style id="ajkpk"><delect id="ajkpk"><legend id="ajkpk"></legend></delect></style></font><small id="ajkpk"><menuitem id="ajkpk"><nobr id="ajkpk"></nobr></menuitem></small><em id="ajkpk"><pre id="ajkpk"><form id="ajkpk"><td id="ajkpk"></td></form></pre></em><table id="ajkpk"></table><var id="ajkpk"></var><legend id="ajkpk"><ul id="ajkpk"><strike id="ajkpk"><video id="ajkpk"></video></strike></ul></legend><li id="ajkpk"><legend id="ajkpk"></legend></li><ruby id="ajkpk"></ruby><ins id="ajkpk"><dfn id="ajkpk"><span id="ajkpk"><noframes id="ajkpk"></noframes></span></dfn></ins><legend id="ajkpk"><th id="ajkpk"></th></legend><thead id="ajkpk"></thead><pre id="ajkpk"></pre><tbody id="ajkpk"><listing id="ajkpk"><sub id="ajkpk"><form id="ajkpk"></form></sub></listing></tbody><noframes id="ajkpk"><span id="ajkpk"></span></noframes><ol id="ajkpk"></ol><label id="ajkpk"></label><em id="ajkpk"><pre id="ajkpk"></pre></em><acronym id="ajkpk"></acronym><rp id="ajkpk"></rp><big id="ajkpk"><listing id="ajkpk"><dfn id="ajkpk"><em id="ajkpk"></em></dfn></listing></big><mark id="ajkpk"><strong id="ajkpk"><dfn id="ajkpk"></dfn></strong></mark><var id="ajkpk"><form id="ajkpk"><strong id="ajkpk"></strong></form></var><tfoot id="ajkpk"><track id="ajkpk"><span id="ajkpk"><strong id="ajkpk"></strong></span></track></tfoot><strong id="ajkpk"><sup id="ajkpk"></sup></strong><output id="ajkpk"><tfoot id="ajkpk"></tfoot></output><tr id="ajkpk"></tr><meter id="ajkpk"></meter><dl id="ajkpk"></dl><menu id="ajkpk"><font id="ajkpk"></font></menu><tr id="ajkpk"><noframes id="ajkpk"><thead id="ajkpk"></thead></noframes></tr><strong id="ajkpk"><dfn id="ajkpk"><listing id="ajkpk"></listing></dfn></strong><style id="ajkpk"></style><s id="ajkpk"><samp id="ajkpk"><i id="ajkpk"></i></samp></s><style id="ajkpk"></style><tbody id="ajkpk"><strike id="ajkpk"><var id="ajkpk"></var></strike></tbody><sup id="ajkpk"></sup><pre id="ajkpk"><ol id="ajkpk"></ol></pre><u id="ajkpk"></u><ins id="ajkpk"><sup id="ajkpk"><button id="ajkpk"><dl id="ajkpk"></dl></button></sup></ins><optgroup id="ajkpk"></optgroup><noframes id="ajkpk"><span id="ajkpk"><small id="ajkpk"></small></span></noframes><strike id="ajkpk"></strike><tt id="ajkpk"><rt id="ajkpk"><small id="ajkpk"><strike id="ajkpk"></strike></small></rt></tt><abbr id="ajkpk"></abbr><address id="ajkpk"><u id="ajkpk"></u></address><div id="ajkpk"></div><tt id="ajkpk"></tt><output id="ajkpk"></output><samp id="ajkpk"><pre id="ajkpk"><big id="ajkpk"><strong id="ajkpk"></strong></big></pre></samp><label id="ajkpk"></label><sup id="ajkpk"><button id="ajkpk"><dl id="ajkpk"><dfn id="ajkpk"></dfn></dl></button></sup><video id="ajkpk"><sup id="ajkpk"></sup></video><fieldset id="ajkpk"><center id="ajkpk"><acronym id="ajkpk"></acronym></center></fieldset><delect id="ajkpk"><style id="ajkpk"></style></delect><div id="ajkpk"><rp id="ajkpk"></rp></div><td id="ajkpk"><form id="ajkpk"><p id="ajkpk"></p></form></td><ol id="ajkpk"></ol><b id="ajkpk"><p id="ajkpk"></p></b><optgroup id="ajkpk"><legend id="ajkpk"><th id="ajkpk"><tbody id="ajkpk"></tbody></th></legend></optgroup><strike id="ajkpk"></strike><input id="ajkpk"><xmp id="ajkpk"><i id="ajkpk"></i></xmp></input><pre id="ajkpk"></pre><div id="ajkpk"></div><ul id="ajkpk"><strike id="ajkpk"></strike></ul><u id="ajkpk"><legend id="ajkpk"></legend></u><var id="ajkpk"><rp id="ajkpk"><label id="ajkpk"><option id="ajkpk"></option></label></rp></var><ruby id="ajkpk"><strong id="ajkpk"></strong></ruby><tt id="ajkpk"></tt><track id="ajkpk"><tfoot id="ajkpk"><pre id="ajkpk"><ol id="ajkpk"></ol></pre></tfoot></track><video id="ajkpk"></video><video id="ajkpk"><pre id="ajkpk"></pre></video><var id="ajkpk"><font id="ajkpk"></font></var><acronym id="ajkpk"><noframes id="ajkpk"><rt id="ajkpk"><small id="ajkpk"></small></rt></noframes></acronym><thead id="ajkpk"><track id="ajkpk"></track></thead><optgroup id="ajkpk"><meter id="ajkpk"></meter></optgroup><samp id="ajkpk"></samp><center id="ajkpk"><label id="ajkpk"><tt id="ajkpk"><rt id="ajkpk"></rt></tt></label></center><ol id="ajkpk"><option id="ajkpk"></option></ol><pre id="ajkpk"></pre><i id="ajkpk"></i><strong id="ajkpk"></strong><pre id="ajkpk"></pre><sup id="ajkpk"></sup><style id="ajkpk"></style><address id="ajkpk"></address><tt id="ajkpk"></tt><menuitem id="ajkpk"></menuitem><form id="ajkpk"></form><optgroup id="ajkpk"><samp id="ajkpk"><tbody id="ajkpk"><strike id="ajkpk"></strike></tbody></samp></optgroup><mark id="ajkpk"><strong id="ajkpk"><mark id="ajkpk"></mark></strong></mark><tfoot id="ajkpk"><track id="ajkpk"></track></tfoot><kbd id="ajkpk"></kbd><center id="ajkpk"></center><tfoot id="ajkpk"><pre id="ajkpk"></pre></tfoot><nobr id="ajkpk"></nobr><menuitem id="ajkpk"><nobr id="ajkpk"></nobr></menuitem><source id="ajkpk"><dfn id="ajkpk"><div id="ajkpk"></div></dfn></source><strong id="ajkpk"><em id="ajkpk"></em></strong><font id="ajkpk"><legend id="ajkpk"><ul id="ajkpk"><code id="ajkpk"></code></ul></legend></font><form id="ajkpk"><div id="ajkpk"></div></form><pre id="ajkpk"><b id="ajkpk"><i id="ajkpk"><output id="ajkpk"></output></i></b></pre><pre id="ajkpk"></pre><strike id="ajkpk"></strike><strong id="ajkpk"></strong><dfn id="ajkpk"></dfn><rt id="ajkpk"><small id="ajkpk"></small></rt><address id="ajkpk"><u id="ajkpk"></u></address><big id="ajkpk"></big><th id="ajkpk"><tbody id="ajkpk"><var id="ajkpk"><form id="ajkpk"></form></var></tbody></th></div> </html>