<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????/*font-family 字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体*/ ???????.box1{ ???????????font-family: Algerian,"宋体"; ???????} ????????/* ??????font-size ??字体大小 ??????????单位 px rem % em ??????????px ??谷歌浏览器默认字体大小16px,最小是12px ??????????rem ?相对于html(根标签)的字体大小 ??????????em ??等于父级的字体尺寸——相对于父级字体大小而言的 ??????????% ???相对于父容器中字体的%调整 ?这个要知道 ??????*/ ???????.box2{ ???????????font-size: 20px; ???????} ???????.box3{ ???????????font-size: 12px; ???????} ???????.box4{ ???????????font-size: 2rem; ???????} ???????#box{ ???????????font-size: 30px; ???????} ???????#box div{ ???????????/*font-size: 2em;*/ ???????????font-size: 50%; ???????} ???????/* ???????font-weight 字体粗细 ???????关键字 ???????????normal 默认字体 ???????????lighter 较细 ???????????bold 加粗 ??这个要知道 ???????????bolder 很粗 ???????给值 ???????????只能100-900的整百数 ???????????400相当于正常的 ???????????700相当于bold ???????*/ ???????.box5{ ???????????font-weight: bold; ???????} ???????.box6{ ???????????font-weight: 700; ???????????font-style: italic; ???????} ???????/* ????????font-style ?字体类型 ????????normal 默认 文字正常 ????????italic ?文字斜体（属性） ????????oblique ?文字斜体 ????*/ ???????/* ???????color ?文字颜色 ???????关键字 ???????????英文单词 ?red green ???????16进制（0-9 a-f） ???????????#5544aa ?#54a #abd456 ???????????#dddddd ?#ddd ???????rgb(0-255,0-255,0-255) ???????????r red ???????????g green ???????????b blue ???????rgba(0-255,0-255,0-255,0-1) ???????????r red ???????????g green ???????????b blue ???????????a alpha(透明度) ???????????????0 完全透明 ???????????????1 完全不透明 ???????*/ ???????.box7{ ???????????/*color: aqua;*/ ???????????color: rgb(224, 62, 69); ???????} ???????.box8{ ???????????/*color: #222add;*/ ???????????color: rgba(224, 62, 69,0.2); ???????} ???</style></head><body> ???<div class="box1">hello 001 abc</div> ???<div class="box2">hello 001 abc</div> ???<div class="box3">hello 001 abc</div> ???<div class="box4">hello 001 abc</div> ???<div class="box5">hello 001 abc</div> ???<div class="box6">hello 001 abc</div> ???<div class="box7">hello 001 abc</div> ???<div class="box8">hello 001 abc</div> ???<div id="box"> ???????<div>hello 001 abc</div> ???</div></body></html>html-字体属性
原文地址：https://www.cnblogs.com/cxhzy/p/10082260.html