要实现在HTML5中的自适应字体，你可以使用CSS的相对单位或者Viewport单位。以下是一些示例：

Viewport单位（vw）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-size: 2vw; /* 使用vw作为字体大小单位 */
        }
    </style>
    <title>Responsive Font Size</title>
</head>
<body>
    <p>This is a sample text with responsive font size.</p>
</body>
</html>

在这个例子中，font-size: 2vw; 意味着字体大小将是视口宽度的2%。这样，无论在什么设备上，文字都将以相对于视口宽度的百分比进行调整。

根据设备宽度使用媒体查询：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-size: 16px; /* 默认字体大小 */
        }

        @media (min-width: 600px) {
            body {
                font-size: 1.2em; /* 在宽度大于等于600px时的字体大小 */
            }
        }

        @media (min-width: 768px) {
            body {
                font-size: 1.5em; /* 在宽度大于等于768px时的字体大小 */
            }
        }

        /* 可以添加更多的媒体查询来适应不同的屏幕宽度 */
    </style>
    <title>Responsive Font Size with Media Queries</title>
</head>
<body>
    <p>This is a sample text with responsive font size.</p>
</body>
</html>

在这个例子中，通过媒体查询根据不同的屏幕宽度设置不同的字体大小。这允许你在不同的屏幕尺寸上使用不同的字体大小。

选择其中一种方法，取决于你的具体需求和设计。Viewport单位提供了一个相对于视口大小的直接百分比，而媒体查询允许你在不同的屏幕宽度上应用不同的样式。

版权属于：泽泽社长
本文链接：https://blog.zezeshe.com/archives/font-method.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！