CSS技巧之数字美化为机械字体样式

花生了什么树_L

已于 2022-07-07 14:38:18 修改

阅读量1.5k

点赞数 4

分类专栏： CSS 文章标签： css

于 2022-07-05 15:22:36 首次发布

本文链接：https://blog.csdn.net/weixin_42694593/article/details/125620414

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 下载字体，可自行在网上查找。

2. Css文件中引入字体

@font-face
{
    font-family: myFont; // 名字可自己定义
    src: url('Digiface normal.ttf')
}

3. 使用

html, body
{
    height: 100%;
    font-family: myFont !important; // 使用刚刚引入的字体
}

4. 完整代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Css数字美化</title>
    <style type="text/css">
		@font-face
        {
            font-family: myFont;
            src: url('./css/Digiface normal.ttf')
        }
        body {
            font-size: 20px;
            font-family: myFont !important;
        }
    </style>
</head>
<body>
    <div class="marquee">
        2022/07/07 14:30:00
    </div>
</body>
</html>