专栏首页小白编程CSS3 font 学习笔记

CSS3 font 学习笔记

CSS3 font属性

  • font-family(字体)
  • font-size(字体大小)
  • font-style(是否倾斜)
  • font-weight(是否加粗)
  • font-variant(设置小型大写字母)
  • font(设置所有属性)(顺序为style,weight,size,family)

font-family

  • 规定元素的字体序列
  • 可传递多个字体参数,如果浏览器不支持第一个字体,会尝试下一个

font-size

  • 规定字体大小
  • 默认为medium
  • 可能的值:xx-small, x-small, small, medium, large, x-large, xx-large
  • 也可为精确尺寸,单位px, pt, em

font-style

  • 规定使用斜体,倾斜,正常字体
  • 默认为normal
  • 可能的值:normal, italic(斜体), oblique(倾斜)

font-weight

  • 规定使用文本的粗细
  • 默认为normal
  • 可能的值:noraml, bold(粗体), bolder(更粗的字体), lighter(更细的字体)

font.html

<head>
    <title>font-family</title>
    <link rel="stylesheet" href="style_font.css" type="text/css" />
  </head>
  <body>
    <p>Hello World</p>
  </body>

style_font.css

p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  font-style: italic;
  font-weight: bold;
}

等同于

p {
  font: italic bold x-large Georgia, "Times New Roman", Times, serif;
}

font-variant

  • 设置小型大写字母
  • 默认值:normal
  • 可能的值:normal, small-caps(小型大写字母)
p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  font-style: italic;
  font-weight: bold;
  font-variant: small-caps;
}

本文分享自微信公众号 - 小白也编程(program_learning),作者:LRainner

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初探numpy——数组的创建

    numpy.asarray方法可以将输入转换为ndarray,如果输入本身就是ndarray则不进行复制

    LRainner
  • 初探pandas——安装和了解pandas数据结构

    Series是一种一维的数组型对象,包含一个值序列(与numpy中的数据类型相似),数据标签(称为索引(index))。

    LRainner
  • C++ vector学习笔记

    LRainner
  • @font-face 属性

    @font-face 允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。 @font-f...

    Html5知典
  • [C#] 常用工具类——直接在浏览器输出数据

    跟着阿笨一起玩NET
  • HTML5基础——文字常用标签(上)

    一、微文概览 标题 字体与字号 颜色 二、详细介绍 1. 标题 我们在HTML文件中写一篇文字时,总会希望将标题的文字设置的大一些,黑一些,粗一些,那么怎样在H...

    用户1667431
  • django2用模板代码图标字体丢失报404 cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

    玩蛇的胖纸
  • 让你的网站用上炫酷的中文字体

    随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体。

    米开朗基杨
  • Android开发之 全局替换字体

    第一反应是好简单,换个TypeFace不就完了,但是不可能每个控件去设置一个吧?不存在的。

    Xiaolei123
  • iconfont关于content值的坑

    font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券