首页 > 软件开发 > HTML >

css字体样式如何设置

来源:互联网 2023-03-16 19:16:26 版权归原作者所有,如有侵权,请联系我们

css如何设置字体样式jc6办公区 - 实用经验教程分享!

css字体样式如何设置jc6办公区 - 实用经验教程分享!

工具/原料

  • phpstorm
  • css
  • html

方法/步骤

  • 为演示方便,使用的是内部样式表,推荐大家使用外部样式表,方便后期维护。jc6办公区 - 实用经验教程分享!

  • 本页面未经许可获取自百度经验
  • 一、使用font-stylejc6办公区 - 实用经验教程分享!

    font-style 属性最常用于规定斜体文本。jc6办公区 - 实用经验教程分享!

    该属性有三个值:jc6办公区 - 实用经验教程分享!

    normal - 文本正常显示jc6办公区 - 实用经验教程分享!

    italic - 文本斜体显示jc6办公区 - 实用经验教程分享!

    oblique - 文本倾斜显示jc6办公区 - 实用经验教程分享!

    css字体样式如何设置jc6办公区 - 实用经验教程分享!

    css字体样式如何设置jc6办公区 - 实用经验教程分享!

  • italic 和 oblique 的区别jc6办公区 - 实用经验教程分享!

    font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。jc6办公区 - 实用经验教程分享!

    斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。jc6办公区 - 实用经验教程分享!

    通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。jc6办公区 - 实用经验教程分享!

  • 二、使用font-weigthjc6办公区 - 实用经验教程分享!

    jc6办公区 - 实用经验教程分享!

    使用 bold 关键字可以将文本设置为粗体。jc6办公区 - 实用经验教程分享!

    关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。jc6办公区 - 实用经验教程分享!

    如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。jc6办公区 - 实用经验教程分享!

    jc6办公区 - 实用经验教程分享!

    jc6办公区 - 实用经验教程分享!

    jc6办公区 - 实用经验教程分享!

    css字体样式如何设置jc6办公区 - 实用经验教程分享!

    css字体样式如何设置jc6办公区 - 实用经验教程分享!

  • 三、使用font-sizejc6办公区 - 实用经验教程分享!

    font-size 属性设置文本的大小。jc6办公区 - 实用经验教程分享!

    有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。jc6办公区 - 实用经验教程分享!

    请始终使用正确的 HTML 标题,比如使用 h1> - h6> 来标记标题,使用 来标记段落。jc6办公区 - 实用经验教程分享!

    font-size 值可以是绝对或相对值。jc6办公区 - 实用经验教程分享!

    css字体样式如何设置jc6办公区 - 实用经验教程分享!

    css字体样式如何设置jc6办公区 - 实用经验教程分享!

  • font-size 值可以是绝对或相对值。jc6办公区 - 实用经验教程分享!

    绝对值:jc6办公区 - 实用经验教程分享!

    将文本设置为指定的大小jc6办公区 - 实用经验教程分享!

    不允许用户在所有浏览器中改变文本大小(不利于可用性)jc6办公区 - 实用经验教程分享!

    绝对大小在确定了输出的物理尺寸时很有用jc6办公区 - 实用经验教程分享!

    相对大小:jc6办公区 - 实用经验教程分享!

    相对于周围的元素来设置大小jc6办公区 - 实用经验教程分享!

    允许用户在浏览器改变文本大小jc6办公区 - 实用经验教程分享!

注意事项

  • 如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替 pixels。

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


标签: HTMLCSS

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