首页 前端知识 二十款漂亮的CSS字体样式

二十款漂亮的CSS字体样式

2024-06-02 09:06:44 前端知识 前端哥 769 891 我要收藏

总会有用到的时候

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body div {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .font1 {
      padding: 0;
      line-height: 1.5em;
      font-family: "Times New Roman", Times, serif;
      font-size: 14px;
      color: #000000;
      background: #f2e7ca;
    }

    .font2 {
      background: #f2e7ca;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 100%;
      line-height: 1em;
      color: #4e4e4e;
      min-width: 920px;
      border-top: 10pxsolid #0c0e0e
    }

    .font3 {
      background: #f2e7ca;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      vertical-align: middle;
      font-weight: normal
    }

    .font4 {
      padding: 0px;
      background-color: #E7EAEB;
      font-family: "微软雅黑", "黑体", "宋体";
      font-size: 12px;
    }

    .font5 {
      background: #f2e7ca;
      font: .8emArial, Tahoma, Verdana;
      color: #777;
    }

    .font6 {
      background: #f2e7ca;
      width: auto;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #999999;
      line-height: 25px;
      letter-spacing: 1px
    }

    .font7 {
      background: #f2e7ca;
      width: auto;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #5f5f5f;
      line-height: 35px;
      text-transform: uppercase
    }

    .font8 {
      background: #e1e5e8;
      font-family: "Georgia", Tahoma, Sans-Serif;
      font-size: 12px;
      line-height: 18px;
      color: #888;
    }

    .font9 {
      background: #f2e7ca;
      color: #317400;
      font: 18px/14pxGeorgia, "Times New Roman", Times, serif;
    }

    .font10 {
      height: 20px;
      background: #f2e7ca;
      color: #01699F;
      font: 13px/20pxGeorgia, "Times New Roman", Times, serif;
      text-decoration: none;
    }

    .font11 {
      padding: 0;
      line-height: 1.5em;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 12px;
      color: #33322e;
      background: #f2e7ca;
    }

    .font12 {
      padding: 0;
      line-height: 1.5em;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 12px;
      color: #6f6f6f;
      background: #f2e7ca;
    }

    .font13 {
      padding: 0;
      line-height: 1.5em;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 11px;
      color: #ffffff;
      background: #005b7f;
    }

    .font14 {
      padding: 0;
      line-height: 1.7em;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #333333;
      background: #f2e7ca;
    }

    .font15 {
      padding: 0;
      line-height: 1.7em;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 12px;
      color: #707b84;
      background: #3e464d;
    }

    .font16 {
      padding: 0;
      line-height: 1.7em;
      letter-spacing: 1px;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 12px;
      color: #333;
      background: #f2e7ca;
    }

    .font17 {
      padding: 0;
      line-height: 1.7em;
      letter-spacing: 1px;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 12px;
      color: #333;
      background: #f2e7ca;
    }

    .font18 {
      background: #f2e7ca;
      padding: 0;
      font-family: arial, sans-serif;
      font-size: 12px;
      margin: 0pxautoautoauto;
      color: #36322b;
    }

    .font19 {
      padding: 0px;
      background: #f2e7ca;
      color: #6B6854;
      font: 14px/18px"Trebuchet MS", Arial, Helvetica, sans-serif;
    }

    .font20 {
      background: #f2e7ca;
      font-family: Georgia;
      font-family: Arial;
    }
  </style>
</head>

<body>
  <div class="font1">font-size</div>
  <div class="font2">font-size</div>
  <div class="font3">font-size</div>
  <div class="font4">font-size</div>
  <div class="font5">font-size</div>
  <div class="font6">font-size</div>
  <div class="font7">font-size</div>
  <div class="font8">font-size</div>
  <div class="font9">font-size</div>
  <div class="font10">font-size</div>
  <div class="font11">font-size</div>
  <div class="font12">font-size</div>
  <div class="font13">font-size</div>
  <div class="font14">font-size</div>
  <div class="font15">font-size</div>
  <div class="font16">font-size</div>
  <div class="font17">font-size</div>
  <div class="font18">font-size</div>
  <div class="font19">font-size</div>
  <div class="font20">font-size</div>
</body>

</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10526.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!