首页 > 软件开发 > HTML >

html网页设计字体设置方式

来源:互联网 2023-03-16 19:12:35 410

我们在制作网页的时候,如果使用单一的字体和格式,往往做出来的东西比较刻板,我们可以使用css设置一些字体格式,让网页更加美观。jPo办公区 - 实用经验教程分享!

工具/原料

  • webstorm
  • 电脑

方法/步骤

  • 1

    我们打开webstorm软件,在HTML文件中创建h1到h6六个标签,分别font-style设置字体风格,italic斜体,normal正常,oblique倾斜,inherit指继承格式,revert还原字体风格。unset重置属性。jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

  • 2

    br />文本换行显示,我们在使用p标签写段落文字的时候,在网页中设置换行但是在实际显示的时候还是不会有换行的格式显示,我们需要在文字中间加上br />符号,设置换行。jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

  • 3

    设置字体的粗细的情况我们可以使用font-weight然后选择字体粗细,bold粗体,bolder稍粗,如图所示,我们可以根据需要设置不同的字体粗细。jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

  • 4

    使用font-size设置字体大小,在css文件上输入font-size之后系统会自动显示我们可以选择的大小,large,larger等等,我们也可以直接输入数字来定义字体的大小。jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

  • 4该信息未经许可获取自百度经验
  • 5

    font-family定义字体样式,如楷体,黑体,宋体等等,这样可以设置文字的显示样式,也可以在后面设置多种字体,作为备用字体。jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

  • 6

    在输入文本的时候,行与行之间的距离也可以自己定义,使用line-height定义一段文字的行高,这样行与行之间的距离就可以拉开,设计出更好的显示格式。jPo办公区 - 实用经验教程分享!

    html网页设计字体设置方式jPo办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!jPo办公区 - 实用经验教程分享!


    标签: HTML网页字体

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码