css——font 样式和对照表 颜色格式和颜色渐变

时间：2025-04-04 17:14:29

1、font

常用字体：宋体（SimSon）、黑体（SimHei）、微软雅黑

{
  font:italic bold 12px/20px arial,sans-serif;
  }

font简写中size和family位置固定 size在前 且都不可省略

font-style：字体样式
normal—— 默认值。浏览器显示一个标准的字体样式。
italic——浏览器会显示一个斜体的字体样式。
oblique——浏览器会显示一个倾斜的字体样式。
inherit——规定应该从父元素继承字体样式。

font-variant：设置小型大写字母
normal——默认值。浏览器会显示一个标准的字体。
small-caps——浏览器会显示小型大写字母的字体。
inherit——规定应该从父元素继承 font-variant 属性的值。

font-weight：字体粗细
normal——默认值。定义标准的字符。
bold——定义粗体字符。
bolder——定义更粗的字符。
lighter——定义更细的字符。
inherit——规定应该从父元素继承字体的粗细。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

font-size/line-height：字体大小和行高

font-family：字体类型
规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称：
指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。
通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
CSS抗锯齿 font-smoothing 属性介绍

-webkit-font-smoothing：字体抗锯齿
使用后字体看起来会更清晰

  • none ------ 对低像素的文本比较好

  • subpixel-antialiased ------默认值

  • antialiased ------抗锯齿很好

body {
    -webkit-font-smoothing: antialiased; /*chrome、safari*/
    -moz-osx-font-smoothing: grayscale; /*firefox*/
}

2、颜色形式

颜色英文名：white
#ffffff
#fff
rgb（255，255，255）
rgba（255，255，255，1）

hsl（颜色（0 到 360，递增为：红 0 橙 30 黄 60 绿 120 青 180 蓝 240 紫 300），饱和度（0% 到 100%），明度（0% 到 100%））
注意：明度默认是 50%，一般建议保留 50% 的值
hsl（360，100%，50%）
hsla（360，100%，50%，1）

3、颜色渐变

添加渐变：渐变不是一个单一色，所以需要使用 background

渐变兼容：

/*以线性渐变为例，后面的渐变兼容一样，加前缀*/
#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

线性渐变

linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置…)

方向：

  • to top:0deg
  • to right:90deg
  • to bottom:180deg (默认值)
  • to left:270deg

位置：

  • 从0%开始，到100%终止
  • 中间颜色可通过%调节占比
#grad {
  background: linear-gradient(red, blue);
}
#grad {/*左右线性渐变*/
  background: linear-gradient(to right, red , blue);
}
#grad {/*对角线线性渐变*/
  background: linear-gradient(to bottom right, red , blue);
}
#grad {/*角度线性渐变*/
  background: linear-gradient(180deg, red, blue);
}
#grad {/*重复线性渐变*/
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变：

radial-gradient(形状 大小 at 坐标，开始颜色 位置，颜色2 位置，颜色3 位置…)
注意:前三个位置固定不可变动

形状（可选）：

  • ellipse：椭圆形 （默认值）
  • circle：圆形
  • 如果元素形状为正方形，则 ellipse 和 circle 显示都一样

at 坐标（可选）：

  • 默认在正中心
  • 可以赋值坐标（参照元素左上角）：radial-gradient(at 30px 30px, red, blue)
  • 也可以赋值关键字（left center right top bottom）

大小（可选，类似 Photoshop 中，沿坐标拉径向渐变到下面的四个选项位置）：

  • closest-side：最近边
  • farthest-side：最远边
  • closet-corner：最近角
  • farthest-corner：最远角 （默认值）
#grad {
  background: radial-gradient(red, green, blue);
}
#grad {/*颜色不均匀径向渐变*/
  background: radial-gradient(red 5%, green 15%, blue 60%);
}
#grad {/*设置形状circle ellipse（椭圆）*/
  background: radial-gradient(circle, red, yellow, green);
}
#grad {/*设置位置*/
  background: radial-gradient(at 30px 30px,red,blue);
}
#grad {/*设置大小 (全设置)*/
  background: radial-gradient(circle closest-side at 30px 30px,red,blue);
}
#grad {/*重复径向渐变*/
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

字体对照表

windows常见内置中文字体
字体中文名 字体英文名 字体应用
宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft Yahei

微软正黑体 Microsoft JhengHei

楷体 KaiTi

新宋体 NSimSun

仿宋 FangSong

OS X常见内置中文字体
字体中文名 字体英文名 字体应用
苹方 PingFang SC

华文黑体 STHeiti

华文楷体 STKaiti

华文宋体 STSong

华文仿宋 STFangsong

华文中宋 STZhongsong

华文琥珀 STHupo

华文新魏 STXinwei

华文隶书 STLiti

华文行楷 STXingkai

冬青黑体简 Hiragino Sans GB

兰亭黑-简 Lantinghei SC

翩翩体-简 Hanzipen SC

手札体-简 Hannotate SC

宋体-简 Songti SC

娃娃体-简 Wawati SC

魏碑-简 Weibei SC

行楷-简 Xingkai SC

雅痞-简 Yapi SC

圆体-简 Yuanti SC

office安装后新增字体
字体中文名 字体英文名 字体应用
幼圆 YouYuan

隶书 LiSu

华文细黑 STXihei

华文楷体 STKaiti

华文宋体 STSong

华文仿宋 STFangsong

华文中宋 STZhongsong

华文彩云 STCaiyun

华文琥珀 STHupo

华文新魏 STXinwei

华文隶书 STLiti

华文行楷 STXingkai

方正舒体 FZShuTi

方正姚体 FZYaoti

开源字体
字体中文名 字体英文名 字体应用
思源黑体 Source Han Sans CN

思源宋体 Source Han Serif SC

文泉驿微米黑 WenQuanYi Micro Hei

版权字体（汉仪）
字体中文名 字体英文名 字体应用
汉仪旗黑 HYQihei 40S

汉仪旗黑 HYQihei 50S

汉仪旗黑 HYQihei 60S

汉仪大宋简 HYDaSongJ

汉仪楷体 HYKaiti

汉仪家书简 HYJiaShuJ

汉仪PP体简 HYPPTiJ

汉仪乐喵体简 HYLeMiaoTi

汉仪小麦体 HYXiaoMaiTiJ

汉仪程行体 HYChengXingJ

汉仪黑荔枝 HYHeiLiZhiTiJ

汉仪雅酷黑W HYYaKuHeiW

汉仪大黑简 HYDaHeiJ

汉仪尚魏手书W HYShangWeiShouShuW

版权字体（方正）
字体中文名 字体英文名 字体应用
方正粗雅宋简体 FZYaSongS-B-GB

方正报宋简体 FZBaoSong-Z04S

方正粗圆简体 FZCuYuan-M03S

方正大标宋简体 FZDaBiaoSong-B06S

方正大黑简体 FZDaHei-B02S

方正仿宋简体 FZFangSong-Z02S

方正黑体简体 FZHei-B01S

方正琥珀简体 FZHuPo-M04S

方正楷体简体 FZKai-Z03S

方正隶变简体 FZLiBian-S02S

方正隶书简体 FZLiShu-S01S

方正美黑简体 FZMeiHei-M07S

方正书宋简体 FZShuSong-Z01S

方正舒体简体 FZShuTi-S05S

方正水柱简体 FZShuiZhu-M08S

方正宋黑简体 FZSongHei-B07S

方正宋三简体 FZSong

方正魏碑简体 FZWeiBei-S03S

方正细等线简体 FZXiDengXian-Z06S

方正细黑一简体 FZXiHei I-Z08S

方正细圆简体 FZXiYuan-M01S

方正小标宋简体 FZXiaoBiaoSong-B05S

方正行楷简体 FZXingKai-S04S

方正姚体简体 FZYaoTi-M06S

方正中等线简体 FZZhongDengXian-Z07S

方正准圆简体 FZZhunYuan-M02S

方正综艺简体 FZZongYi-M05S

方正彩云简体 FZCaiYun-M09S

方正隶二简体 FZLiShu II-S06S

方正康体简体 FZKangTi-S07S

方正超粗黑简体 FZChaoCuHei-M10S

方正新报宋简体 FZNew BaoSong-Z12S

方正新舒体简体 FZNew ShuTi-S08S

方正黄草简体 FZHuangCao-S09S

方正少儿简体 FZShaoEr-M11S

方正稚艺简体 FZZhiYi-M12S

方正细珊瑚简体 FZXiShanHu-M13S

方正粗宋简体 FZCuSong-B09S

方正平和简体 FZPingHe-S11S

方正华隶简体 FZHuaLi-M14S

方正瘦金书简体 FZShouJinShu-S10S

方正细倩简体 FZXiQian-M15S

方正中倩简体 FZZhongQian-M16S

方正粗倩简体 FZCuQian-M17S

方正胖娃简体 FZPangWa-M18S

方正宋一简体 FZSongYi-Z13S

方正剪纸简体 FZJianZhi-M23S

方正流行体简体 FZLiuXingTi-M26S

方正祥隶简体 FZXiangLi-S17S

方正粗活意简体 FZCuHuoYi-M25S

方正胖头鱼简体 FZPangTouYu-M24S

方正卡通简体 FZKaTong-M19S

方正艺黑简体 FZYiHei-M20S

方正水黑简体 FZShuiHei-M21S

方正古隶简体 FZGuLi-S12S

方正幼线简体 FZYouXian-Z09S

方正启体简体 FZQiTi-S14S

方正小篆体 FZXiaoZhuanTi-S13T

方正硬笔楷书简体 FZYingBiKaiShu-S15S

方正毡笔黑简体 FZZhanBiHei-M22S

方正硬笔行书简体 FZYingBiXingShu-S16S

摘自/study/201703/

相关文章