1

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

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

4

4 回答 4

3

是的你可以

只需调用 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');
});
于 2012-05-03T19:20:11.917 回答
0

你只需要给你想要的文本一个 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>
于 2012-05-02T23:44:52.157 回答
0

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

你可以在这里阅读更多：http ://webdesignerwall.com/tutorials/css-gradient-text-effect

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

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

于 2012-05-03T00:16:27.457 回答
-2

你可以只使用 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)
);
于 2012-05-03T00:10:36.813 回答