CSS字体font

字体大小

font-size 设置字体的大小 ,px 是一个单位,代表屏幕的上的像素,在css大多数数值都需要添加单位

font-size: 12px;  

字体粗细

font-weight 设置字体的粗细 ,取值:默认(normal) 、加粗(bold)、 100 - 900

font-weight:bold

因为字体在初始设计的时候就没有设置太多的粗细标准,用数字设置的时候,只有在400和700会产生变化,在实际工作中 用的最多的就是normal(400) bold(700)

字体风格

font-style 设置字体的风格(样式) 取值:normal 默认 显示标准的字体样式 italic 字体倾斜

font-style:italic;

字体类型

font-family 设置不同的字体,取值:宋体、微软雅黑、黑体等等。

font-family:"宋体";

字体可以写多个,中间用逗号隔开,浏览器会从左到右依次解析,直到识别出当前电脑安装的字体则直接使用,字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号,了解:http://code.ciaoca.com/style/cssfont2unicode/

font: font-style  font-weight  font-size/line-height  font-family;

不建议修改顺序 并且不需要设置的属性可以不写 但是font-size和font-family必须指定,否则将不起作用

行高

行高控制的是文字与文字之间的上下距离 (行距)

line-height:值;
  1. 值的取值是像素
  2. **小技巧:如果将标签的高度和行高设置成一样,那么这个标签里面的文字可以在这个标签里面垂直居中
  3. 两者结合使用可以让单行文字在标签内部水平垂直居中

文字的对齐

text-align:值;

取值:left right center
该属性控制的是标签  “内部的文字”  水平居中

首行缩进

text-indent:值;
取值可以是像素,也可以是em  推荐写法:text-indent:2em;

字体下划线和删除线

text-decoration:值;
取值:underline 下划线  line-through 删除线 none 去掉多余的样式

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • golang-101-hacks(14)——切片与数组的关联

    注:本文是对golang-101-hacks中文翻译。 往切片中增加数时,如果切片的所关联的数组没有足够的空间,会重新开辟一个新的数组空间。同时将原先数组中的...

    羊羽shine
  • iOS模块化(2)——CocoaPods的运用

    iOS组件化现阶段成为开发者讨论的热点问题,个人觉得这是iOS技术日渐成熟的表现,就跟一个人一样,最初是想着如何吃饱,现在开始琢磨如何变着花样吃好。不太想蹭组件...

    羊羽shine
  • 分治算法

    在计算机科学中,分治法是一种很重要的算法。字面上的解释是“分而治之”,就是把一个复杂的问题分成两个或更多的相同或相似的子问题,再把子问题分成更小的子问题,直到最...

    羊羽shine
  • 移动端引入的字体文件过大处理方法

    用户1741436
  • 怎么在自己的网页中引用其他好看的字体?

    有的网站字体,用户电脑上没有,如果只是单纯的定义 font-family 是不起效的。 我们可以将字体文件放置在网站目录(知道君喜欢放在OSS,但是这个需要注意...

    夏末浅笑
  • markdown编辑器(颜色、大小、字体)

    Daotin
  • 处理器并行设计

    233333
  • 强烈推荐:9 款用起来超爽的编程字体!

    Consolas 是一套等宽字体的字型,属无衬线字体,由 Lucas de Groot 设计,这套字型使用了微软的 ClearType 字型平滑技术,非常好看。

    帅地
  • 计算机组成原理笔记(二)

    我们先来看一个问题,在Chrome浏览器里面通过开发者工具,打开浏览器里的Console,在里面输入“0.3 + 0.6”:

    luozhiyun
  • 强烈推荐:9 款用起来超爽的编程字体!

    Consolas 是一套等宽字体的字型,属无衬线字体,由 Lucas de Groot 设计,这套字型使用了微软的 ClearType 字型平滑技术,非常好看。

    GitHubDaily

扫码关注云+社区

领取腾讯云代金券