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>
效果:
文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/articles/detail/HTML-de-wen-zi-yang-shi.html
评论列表(196条)
测试