优秀的编程知识分享平台

网站首页 > 技术文章 正文

HTML的文字样式（html 文字字体）

nanyue 2024-09-14 06:19:56 技术文章 5 ℃

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。

字体修改

  • font-family 属性：设置HTML页面中的字体
  • font-size 属性：设置字体大小
  • font-weight 属性：设置字体的粗细程度
  • font-style 属性：设置指定字体样式

font-family写法示例：

 <style>
         p{
             font-family: "幼圆";
         }
     </style>
 </head>
 <body>
     <p>19级启嘉班</p>
 </body>

效果：

此大小是浏览器放大效果，并不是对字体进行的更改

font-size写法示例：

  <style>
         p{
             font-family: "幼圆";
             font-size: 100px;
         }
     </style>
 </head>
 <body>
     <p>19级启嘉班</p>
 </body>

效果：


font-weight 写法示例：

 <style>
         p{
             font-family: "幼圆";
             font-size: 100px;
             font-weight: 700;
         }
     </style>
 </head>
 <body>
     <p>19级启嘉班</p>
 </body>

效果：


引入web字体

关键字@font-face，可以引入从网络上下载的字体在HTML中应用。

写法示例：

  <style>
         /*给某元素设置字体样式，每个浏览器都有默认字体*/
         p{
             font-family: '华文行楷';
         }
         /*设置引入web字体*/
         @font-face{
             font-family: 'runzhi';
             src:url('font/禹卫书法云墨简体.ttf') ;
             font-weight: 400;
             font-style: normal;
         }
         /*给某元素设置字体样式，下面的代码是设置成引入的字体
         上面的font-family叫什么名，下面就叫什么名*/
         p{
             font-family: runzhi;
             font-size: 30px;
         }
         
     </style>

效果：

Tags：

猜你喜欢

最近发表
标签列表