css 实现字体三连 (镂空、渐变、背景)、彩色字体
美化字体,镂空字是个不错的选择。
镂空字
![](https://img2022.cnblogs.com/blog/806524/202209/806524-20220916181042727-582236109.png)
p {
font-size: 150px;
color: white;
-webkit-text-stroke: 6px red;
}
字体白色,描边红色。
渐变色镂空文字
![](https://img2022.cnblogs.com/blog/806524/202209/806524-20220916181117043-2034893165.png)
p {
font-size: 150px;
-webkit-text-stroke: 6px red;
background-color: rosybrown;
background-image: -webkit-linear-gradient(top, red, #fd8403, yellow);
-webkit-background-clip: text;
color: transparent;
}
文字描边 + 背景渐变
文字背景
![](https://img2022.cnblogs.com/blog/806524/202209/806524-20220916181140402-716828083.png)
div {
font-size: 150px;
background: url(../imgs/jojo.webp) no-repeat;
background-size: 100%;
background-origin: border-box;
-webkit-background-clip: text;
color: transparent;
}
这里的关键点是-webkit-background-clip: text
, 意思是将dom内文字以外的区域裁剪掉, 所以就剩文字区域了, 然后文字再设置成透明的。
彩色字体
当使用彩色字体时(比如阿里的iconfongt),可能希望能够控制其颜色。当浏览器支持了 COLRv1 Color 后,可以通过 css 的 font-palette 相关属性进行覆盖控制。
font-palette
属性专门用来改变彩色字体中的字形颜色的,配合 @font-palette-values
规则,可以让 CSS 对字符色彩的控制达到一个全新的高度。
三步:
1.自定义字体
@font-face {
font-family: 'Rocher';
src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
}
Rocher Color:一种来自 Henrique Beier 的免费可变颜色字体,带有 Flintstones 风格。
识别字体调色板的在线工具: Wakamai Fondue,拖拽上传字体文件(比如:RocherColorGX.woff2),网站将列出所有可用的配色方案。
![](https://image.zhangxinxu.com/image/blog/202207/2022-07-21_184609.png)
2.自定义字体调色板
@font-palette-values --Grays {
font-family: Rocher;
base-palette: 9; // 调色板9 一序列灰色
}
3.调用字体
.grays {
font-family: 'Rocher';
font-palette: --Grays;
}
![](https://image.zhangxinxu.com/image/blog/202207/2022-07-21_185128.png)
补充:第2步基础上:重置选择的字体调色板中的颜色
@font-palette-values --GraysRemix {
font-family: Rocher;
base-palette: 9;
override-colors: // 重置一组颜色中的第2个颜色
2 rgb(90,290,210);
}
body {
font-family: "Rocher";
font-palette: --GraysRemix;
}
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/05/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1650277001887_ScreenShot2022-04-18at11.15.34AM.png?resize=1536%2C294&ssl=1)
参考: