CSS中的双色调字体着色？

Posted 2023-03-15

【中文标题】CSS中的双色调字体着色？

【英文标题】：Two-tone font coloring in CSS?

【发布时间】：2011-09-23 06:07:33

【问题描述】：

我真的很喜欢双色调按钮和字体的外观。我在想什么时候字体的上半部分是一种颜色，而下半部分是同一种颜色的变体。有关示例，请参见 iPhone 上的大多数按钮或此处的徽标 http://ming.ly。

是否可以在 CSS 中重新创建这种效果？或者，是否有一个免费工具可以用来生成类似这样的字体？

【问题讨论】：

你有这样的字体吗？即 . ttf 文件？？

不——它更多的是关于颜色而不是字体的实际选择。

【参考方案1】：

I managed to achieve that with CSS...

示例

CSS

div 
    position: relative;  
    color: #0f0;
    font-size: 28px;


div span 
    height: 50%;
    position: absolute;
    color: #f00;
    overflow: hidden;  

html

<div>
    <span>Hello</span>
    Hello
</div>

jsFiddle.

在 Firefox 5 中测试。

请记住，重复显示一次的文本不是很语义化。

根据您需要支持的浏览器，您可以在 CSS 中放弃内部 span 以获取类似的内容...

div:before 
    content: "Hello";
    height: 50%;
    position: absolute;
    color: #f00;
    overflow: hidden;   

jsFiddle.

据我所知，content 没有任何价值，它会自动使用该元素的文本节点。您可以将其放在title 属性上并使用attr(title)（或任何其他属性）。

您也可以使用 javascript 进行重复。

var textRepeat = document.createElement('span'),
    textRepeatTextNode = document.createTextNode(element.firstChild.data);

element.appendChild(textRepeat.appendChild(textRepeatNode));

如果第一个子节点不一定是文本节点，您可以使用element.textContent || element.innerText。

【讨论】：

这很酷。即使它在语义上不是很好。也许可以创建 javascript 以根据类自动化它。

@yitwail 是的，重复两次有点糟糕。你总是可以在 CSS 中使用div:after content: 'Whatever' 。

我什至不知道你能做到这一点，但是你在 css 而不是 html 中重复它，它仍然重复。 JavaScript 不需要，但当然 JavaScript 可能不可用。 :(

我知道问这个问题可能没用，但是投票者可以解释他们的理由吗？我想借此机会学习一些东西或捍卫我的 CSS :)

@yitwail 是的，但正如您所见，大多数实现都有缺点。

【参考方案2】：

我非常喜欢@alex 方法。一种替代解决方案，支持白色曲线，但我认为目前不支持跨浏览器*，可能如下：

css

#text 
    color: #5283CA;
    font-size: 70px;
    height: 100px;
    overflow: hidden;
    width: 210px;

#curve 
    -moz-transform: rotate(60deg);
    -webkit-transform:rotate(60deg);
    -o-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    background: none repeat scroll 0 0 white;
    border-radius: 200px 20px 80px 20px;
    bottom: 270px;
    display: block;
    height: 1000px;
    opacity: 0.5;
    filter: alpha(opacity=50);
    position: relative;
    right: 330px;
    width: 200px;

html

<div id="text">Mingly<div id="curve"></div>

演示： http://jsfiddle.net/ENPnU/

我不知道任何可以使边框弯曲的 css 属性。所以我使用了可以用 css 创建的圆角。然后我将带有圆角的元素（在本例中为#curve）旋转到正确的位置，看起来就像文本中的一条白色曲线。然后添加了白色不透明度。

*我试过让它和ie一起工作，但我没有找到完整的解决方案，你可以在这里找到结果：http://jsfiddle.net/3TpeA/