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

最新推荐文章于 2024-06-27 17:17:58 发布
最新推荐文章于 2024-06-27 17:17:58 发布
阅读量7.2k 收藏 8
点赞数 2
分类专栏： html 和 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky541788/article/details/81608632
版权

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

汉仪雅酷黑WHYYaKuHeiW

汉仪大黑简HYDaHeiJ

汉仪尚魏手书WHYShangWeiShouShuW

版权字体（方正）
字体中文名字体英文名字体应用
方正粗雅宋简体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

摘自http://www.zhangxinxu.com/study/201703/font-family-chinese-english.html

肖ZE
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html网页字体颜色代码大全
zhujiaxing666666的专栏
10-27 9644
Html网页字体颜色代码大全 好多人找html网页字体颜色都要去PS或者fireworks里面对照看下，那样太麻烦了，我给大家总结出一些用于Html网页文字颜色的代码，以免在去大家软件看看是什么颜色，html网页的代码太多了，我找的这些都是基本常用的字体颜色吧！也记录给我自己用的，以后就不会在去软件里面看下到底用哪种文字代码，希望大家喜欢!至于怎么详细的操作就不用我给大家说了吧！呵呵，喜欢的话大
FONT 字体颜色大全
weixin_30420305的博客
02-10 1430
用这句代码 替换 AmericanTypewriter-Bold字段就会有不同的字体样式 _typeLabel.font = [UIFont fontWithName:@"AmericanTypewriter-Bold"size:14]; Font Family: American Typewriter（AmericanTypewriter，AmericanTypewrite...
CSS初级属性
qq_53959286的博客
12-25 2674
关于CSS属性 设置字体的属性 1. font-size属性 font-size 可以设置字体大小，可以无限放大，但是不能无限小， 最小是12 值为长度单位： px 像素单位 em 一个汉字的大小 ex 一个英文x的大小 % 百分比 1 font-size:20px; //可以无限放大 2 font-size:12px; //不可以无限小，最小为12px的字体； 2.color属性 color 设置字体的颜色，注意 千万别写成font-color 值为颜色值：
css设置字体渐变色以及背景颜色渐变色
最新发布
m0_59157023的博客
06-27 655
【代码】css设置字体渐变色以及背景颜色渐变色。
中文字体样式对照表
03-26
中文字体样式对照表，一边网页制作过程中对字体的正确认识。
Css颜色,文本字体
weixin_43677350的博客
11-16 1240
css颜色表示法 颜色名表示，比如：red 红色，gold 金色 16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00 RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化 background-color: rgb(200,100,0); RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A) background-color: rgba(0,0,0...
css-font-color例子
热门推荐
caoliangang的专栏
03-26 1万+
CSS 文本字体颜色设置方法(CSS color)
icontent
06-21 430
转自：https://www.pinlue.com/article/2020/04/3013/3510268501157.html
CSS的font颜色渐变
weixin_53035812的博客
08-13 292
HTML <span class="valueStyle">15</span> CSS .valueStyle{ font-weight:600; font-size:25px; margin-bottom:0px; cursor:pointer; background-image:-webkit-linear-gradient(bottom,red,#ff5f60,#f0c41b); -webkit-background
HTML基础知识——css样式表,样式属性,格式与布局详解
09-28
下面小编就为大家带来一篇HTML基础知识——css样式表,样式属性,格式与布局详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
09-25
使用CSS3 的背景渐变 -webkit-gradient ，用一个背景渐变的 DIV 代替图片。下面是实现效果示例，相比以上方案优点是不使用图片，减小请求量和流量
Iconfont 使用及demo（单色、多色、渐变色） 案例demo
04-24
NULL 博文链接：https://it1990eye0920.iteye.com/blog/2415938
CSS3 background-image颜色渐变的实现代码
09-22
主要介绍了CSS3 background-image颜色渐变的实现代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS实现颜色渐变效果（包含环形渐变、线性渐变、彩虹效果等）
09-25
【CSS渐变色详解】 ...总之，纯CSS实现的颜色渐变是现代网页设计中不可或缺的一部分，其灵活性和跨浏览器兼容性使其成为设计师和开发者的重要工具。通过理解和熟练运用这些技巧，可以提升网站的美学价值和交互体验。
CSS滤镜实现的颜色渐变翻转效果
09-25
在本文中，我们将深入探讨如何使用CSS滤镜实现颜色渐变翻转效果。CSS滤镜是一种强大的工具，它可以改变元素的视觉表现，包括颜色、对比度、模糊度等。在本例中，我们将重点讨论`transform`和`transition`属性，这两...
怎么在css中定义字体颜色,css中怎么设置字体颜色
weixin_29544469的博客
08-03 1万+
css中怎么设置字体颜色发布时间：2021-07-22 18:15:24来源：亿速云阅读：52作者：Leah本篇文章给大家分享的是有关css中怎么设置字体颜色，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。font-size:18px;:设置字号color:#093:设置字色font-family:'宋体';:设置字体(要尽量使用通用的...
Css 字体样式( font-family,font-size,color,font-weight,font-style,font)
wangtao的博客
11-27 1121
Css 字体样式： font-family:设置文本的字体系列; a.字体家族：一系列的字体呈现的一种同一的风格，是拥有相似外观的字体的系统组合; b.特定字体:一个单独的字体系列; c.支持多个取值，以逗号分隔开,浏览器解读的时候安装从左到右的顺序，如果不支持第一个字体,则依次尝试下一个; d.被所以的html字元素继承,通常可以个bo...
css的font修改颜色,css的font字体颜色如何设置
weixin_35698805的博客
08-04 5096
css的font字体颜色设置方法：1、直接在标签上使用“color:颜色”设置字体颜色；2、通过给font标签添加class属性，在css标签中通过该class设置字体颜色。本教程操作环境：windows7系统、css3版，DELL G3电脑。css的font字体颜色设置方法：新建一个html文件，命名为test.html，用于讲解css中font字体颜色怎么设置。在test.html文件内，使用...
CSS入门之字体样式用法color(颜色),font-style(倾斜),font-weight(重量),font-variant(大小写)
u011333814的专栏
01-25 5748
字体样式用法： color:代表字体的颜色 有3中表示方法: 1.#16进制（如color:#ff0000,此种亦可写为#f00）， 2.RGB(color:rgb(100,14,200), 3.具体颜色英文名(如color:red) font-style 设置字体样式 有3种： 1.font-style:normal         表示正常的字体 2.font
css颜色代码对照表
08-20
在示例代码中并没有提到CSS颜色代码对照表的相关内容。因此，我无法回答这个问题。<span class="em">1</span> #### 引用[.reference_title] - *1* [使用Python的爬虫框架Scrapy来爬取网页数据.txt](https://download.csdn.net/download/weixin_44609920/88225579)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值