Question

我有一个嵌入字体的文本，必须有一个垂直渐变，你能为它提供一个jQuery插件吗？我需要保留字体系列，大小和其他属性，并且只添加了垂直渐变。

我找到了一个（http://www.codefocus.ca/goodies/gradienttext），但它覆盖了我的所有字体。

Answer 1

是的，你可以

只需调用css（）方法再次应用字体

首先，你为什么不在一个READY函数中编写这两个代码？

其次，解决方案（可能是:)）

jQuery(document).ready(function($){ // yup, I like to use it this way - safe

    var test1Opts = {
            colors: ['#FFF', '#EB9300'],
            style: 'vertical',
            shadow:             true,
            shadow_color:       '#000000',
            shadow_offset_x:    1,
            shadow_offset_x:    1,
            shadow_blur:        1
        },
        test2Opts = {
            colors: [
                '#FF0000',
                '#FF6600',
                '#CCFF00',
                '#00FF00',
                '#0066FF',
                '#FF00FF'
            ],
            style: 'horizontal'
        }

    $('#test1')
        .gradienttext(test1Opts)
        .css('font-family', 'YOUR CUSTOM FONT NAME')
    //  optionally you can call the following to apply font on all child items
    //  by uncommenting the 2 lines below
    //  .find('*')
    //  .css('font-family', 'YOUR CUSTOM FONT NAME');

    //  you can also use the short "font" syntax, 
    //  if you have a lot of options in your font-face

    $('#test2')
        .gradienttext(test2Opts)
    //  .css('font', 'style weight size/line-height YOUR CUSTOM FONT NAME')
        .css('font', 'normal bold 11px/16px YOUR CUSTOM FONT NAME')
        .find('*')
        .css('font-family', 'YOUR CUSTOM FONT NAME');
});

Answer 2

你只需要给你想要id的文本，并在jquery代码中使用这个id。这是一个演示来做到这一点：

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gradienttext-0.1.min.js"></script>
<style>
    p{ font-size: 30px; }
</style>

<script>

    $(document).ready(function(){
        $('#test1').gradienttext({
            colors: ['#FFF', '#EB9300'],
            style: 'vertical',
            shadow:             true,
            shadow_color:       '#000000',
            shadow_offset_x:    1,
            shadow_offset_x:    1,
            shadow_blur:        1
        });
    });

    $(document).ready(function(){
        $('#test2').gradienttext({
            colors: [
                '#FF0000',
                '#FF6600',
                '#CCFF00',
                '#00FF00',
                '#0066FF',
                '#FF00FF'
            ],
            style: 'horizontal'
        });
    });
</script>
</head>
<body>
        <p id="test1">test 1</p>
        <p id="test2">test 2</p>

</body>
</html>

Answer 3

实际上，您可以使用纯CSS进行文本渐变。该技术涉及使用透明的渐变PNG覆盖文本（您也可以使用CSS3的linear-gradient）。

您可以在此处阅读更多内容：http://webdesignerwall.com/tutorials/css-gradient-text-effect

您可以使用JS（或jQuery）自动执行此操作，而不是添加实际标记中所需的span。

此效果根本不会改变字体（@ font-face链接或其他方式）。

Answer 4

你可以用css做线性渐变。

background-image: linear-gradient(bottom, #666666 23%, #908c8c 62%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.23, #666666),
    color-stop(0.62, #908c8c)
);

用于文本渐变的jQuery插件

4 个答案: