css文字渐变_CSS渐变文字

最新推荐文章于 2024-07-01 15:53:36 发布

culuo8053

最新推荐文章于 2024-07-01 15:53:36 发布

阅读量257

点赞数

文章标签： css html java python css3

原文链接：https://davidwalsh.name/css-gradient-text

版权

css文字渐变

Web developers know the fight we’ve all had to improve fonts on the web. Whether it be load time, odd strategies for using custom fonts (Cufon, anyone?), or just finding the right font itself, beautifying text on the web has never come easy.

Web开发人员知道，我们所有人都必须努力改善Web上的字体。无论是加载时间，使用自定义字体(Cufon，有人吗？)的奇怪策略，还是只是找到合适的字体本身，美化网络上的文本从未如此简单。

That got me thinking about fonts and CSS gradients, since gradients also had a difficult introduction to the web. Let’s look at how we can use gradient fonts with only CSS!

那让我开始考虑字体和CSS渐变，因为渐变对Web的介绍也很困难。让我们看看如何仅在CSS中使用渐变字体！

View Demo 观看演示

To display a gradient for a given font, instead of a solid color, you’ll need to use some old-school -webkit--prefixed properties:

要显示给定字体的渐变而不是纯色，您需要使用一些老派的-webkit-前缀属性：

.gradient-text {
  /* standard gradient background */
  background: linear-gradient(red, blue);

  /* clip hackery */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

This mixture of -webkit--specific CSS and general gradient background was discovered ten years ago but remains the best way to achieve a pure CSS background, even with custom fonts. Note that despite the -webkit prefix, Firefox still correctly renders the gradient font. Also note that removing the prefix breaks proper rendering — weird!

十年前发现了-webkit-特定CSS和常规渐变背景的混合，但即使使用自定义字体，它仍然是获得纯CSS背景的最佳方法。请注意，尽管使用-webkit前缀，Firefox仍可以正确呈现渐变字体。另请注意，删除前缀会破坏正确的呈现效果-很奇怪！

View Demo 观看演示

With as complicated as fonts can get, it’s awesome that we have a fairly simple CSS hack to accomplish gradient text. It’s a shame that avoiding the -webkit prefix breaks functionality, but welcome to the world of CSS!

字体非常复杂，所以我们有一个相当简单CSS hack来完成渐变文本，真是太棒了。避免使用-webkit前缀会破坏功能，但是欢迎您来到CSS世界！