实现字体镂空需要使用一个特殊的字体

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         div {
    10.             width: 600px;
    11.             font-size: 100px;
    12.             font-weight: bold;
    13.             position: absolute;
    14.             left: calc(50% - 300px);
    15.             top: 100px;
    16.             /* 字体镂空*/
    17.             color: transparent;
    18.             /*设置字体,这个字体可以实现字体镂空 */
    19.             font-family:simsun;
    20.             /* 字体描边 */
    21.             -webkit-text-stroke: 1px red;
    22.         }
    23.     </style>
    24. </head>
    26. <body>
    27.     <div>这是一段文字</div>
    28. </body>
    30. </html>

    效果图
    image.png