CSS中的双色字体着色？

Question

我非常喜欢双色按钮和字体的外观。我的想法是将字体的上半部分设为一种颜色，下半部分设为同一颜色的变化版本。例如，在 iPhone 上的大多数按钮或此处的徽标中查看http://ming.ly。

是否可能在CSS中重新创建这种效果？或者，是否有免费工具可用于生成类似此效果的字体？

- Kevin Burke

---

你有这样的字体吗？例如.ttf文件？ - Balanivash

不，这更多是关于配色而不是字体的实际选择。 - Kevin Burke

Answer 1

我用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中测试。

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

根据您需要支持的浏览器，您可以放弃那个内部的span，使用CSS中的类似内容...

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。

- alex

---

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

我知道询问下投票者的理由可能是无用的，但我想借此机会学习一些东西或为我的CSS辩护 :) - alex

@yitwail 是的，但是正如您所看到的，大多数实现方法都有缺点。 - alex

@Kevin 可能是这样。如果你担心的话，可以尝试其他的解决方案。 - alex

是的，当我写下这个答案时，它在2011年并没有得到很好的支持 :) - alex

Answer 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/

- Sotiris