CSS字体属性

一.font-size(重要)


🤢font-size:决定文字的大小,常用的设置方式如下:

  1. 具体数值+单位:比如100px
  2. 也可以用em单位(不推荐),1em代表100%。
  3. 百分比:基于父元素的font-size进行计算,比如50%表示等于父元素font-size的一半。
css 复制代码
<style>
  .box{
    font-size:12px;
  }
</style>

/* 将box盒子中的这字体大小设置为12px  */

二.font-family


🥰font-family用于设置字体的名,可以设置文字的字体名称,浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过@font-face指定的可以直接下载的字体;

🤢当页面代码设置微软雅黑的话,浏览器首先会去当前电脑的操作系统是否支持当前的字体,浏览器会选择列表中的第一个该计算机上安装的字体,或者通过@font-face指定的直接下载的字体;

😬如果字体是由多个单词组成的,一般推荐使用''包裹起来,这样浏览器支持性更好;

css 复制代码
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

三.font-weight


👽font-weight:用于设置文字的粗细;

  1. 常见的取值为,100|200|300|400|500|600|700|800|900:每一个数字表示一个重要。
  2. normal 等于400。
  3. bold:等于700。

🙈strong``b``h1-h6等标签的font-weight默认就是bold;

css 复制代码
p {
  font-weight: bold;
}

四.font-style


🐸font-style:用于设置文字的常规,斜体显示;

  1. normal:常规的显示
  2. italic:用字体的斜体显示(通常会有专门的字体)
  3. oblique:文字的倾斜显示(仅仅让文字倾斜)
css 复制代码
p {
  font-style: italic;
}

五.font-variant


😈font-variant:影响小写字母的显示形式,variant是显示形变的意思;

  1. normal:常规显示;
  2. small-caps:将小写字母替换为缩小过的大写字母;
css 复制代码
p {
  font-variant: small-caps;
}

六.line-height


🐔line-height用来设置文本的行高,行高可以先简单理解为一行文字所占据的高度;

🐳行高的严格定义:两行文字基线之间的间距;

🦄基线:与小写字母x最底部对齐的线;

😈实际案例:如果想让文本居中对齐,将line-heightheight设置为一样即可;

css 复制代码
p {
  line-height:20px;
}

六.font缩写


🐳font是一个缩写,可以用来做font-style font-variant font-weight font-size line-height font-family属性的简写;

  1. font-style font-variant font-weight可以随意调换位置,也可以省略;
  2. line-height可以省略,如果不省略,必须跟在font-size后面;
  3. font-sizefont-family不可以调换位置,不可以省略;
css 复制代码
selector {
  font: font-style font-variant font-weight font-size/line-height font-family;
}

🦄总结就是:font-sizefont-family是必须的并且位置不可换,其他都是可选的;


相关推荐
jiangzhihao05153 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI5 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front6 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie6 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀6 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻6 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树7 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔7 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04127 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj508 小时前
前端基础之《React(1)—webpack简介》
前端·react