html文字的效果(HTML的文字样式)

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>

效果:

html文字的效果(HTML的文字样式)(1)

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

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>

效果:

html文字的效果(HTML的文字样式)(2)

引入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>

效果:

html文字的效果(HTML的文字样式)(3)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页