0

我正在使用 background-clip 属性用背景图像填充我的文本。出于某种原因，即使我使用的图像非常大，也被截断为文本左右边缘的背景。正如您将在屏幕截图中看到的那样，我丢失了字母“J”的一侧。当我在那里有我的全名但为了隐私而将其替换时，这也发生在本文的右侧。我已经尝试删除填充以及扩大我的文本的容器，但没有任何帮助，当我再次将我的文本设为纯色时，它不会被切断。我不确定我使用的 Big Text 插件是否弄乱了它。谁能帮我这个？

http://i41.tinypic.com/2ms0suh.png

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

<title>jessica n/a: PORTFOLIO</title>

<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:700italic' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.ico" />

<style>
    body
    {
        background: url(grungebg.png) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        margin:0 auto;
        padding:10px;
        max-width:600px;
        min-width:250px;
    }

    #container
    {
        text-align:center;
    }

    @font-face
    {
        font-family: 'league_gothicregular';
        src: url('leaguegothic-regular-webfont.eot');
        src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('leaguegothic-regular-webfont.woff') format('woff'),
        url('leaguegothic-regular-webfont.ttf') format('truetype'),
        url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    .font1
    {
        font-family:league_gothicregular, sans-serif;
        color:#a7a7a7;
        background: -webkit-linear-gradient(transparent, transparent), url(mask.png);
        background: -o-linear-gradient(transparent, transparent), url(mask.png);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .font2
    {
        font-family: Quicksand, sans-serif; 
        font-weight:300;    
        color:#e5e5e5;
    }

    .font3
    {
        font-family:Playfair Display, serif;
        font-weight:700;
        font-style:italic;
        color:#b90504;
        background: -webkit-linear-gradient(transparent, transparent), url(colormask.png);
        background: -o-linear-gradient(transparent, transparent), url(colormask.png);
        background-position:center;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .font4
    {
        font-family: Quicksand, sans-serif; 
        font-weight:400;
        font-size:14px;
        color:#e5e5e5;
    }
</style>
</head>

    <body>

        <div id="container">
            <div class="font1">HELLO,</div>
            <div class="font2">my name is</div>      
            <div class="font3">jessica n/a</div>
        </div>
        <div id="extendedcontainer" class="font4">
            and I'm a student studying Graphic Communication Design at the _______ __ _______ _____________ ____ ___ ________ at the __________ of __________. I like to design websites and take pictures.
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script src="bigtext.js"></script>
        <script>



        jQuery(window).load(function () {
            $('#container').bigtext();

        });
        </script>
    </body>
</html>
4

1 回答 1

2

我意识到这是一个非常古老的问题，但该解决方案可能对遇到它的人有所帮助：

这实际上是由于标题的边界框没有超出文本本身的基线，或者是由于字体具有连字或其他 em 绑定技巧来创建连接脚本字体。您可以通过添加填充来欺骗您的边界框为下降者提供足够的空间，然后使用相同绝对值的负边距否定该填充，以使文本恢复到原来的位置。

.font3 {
  padding-left: 0.2em;
  margin-left: -0.2em;
}

这也可以在通过切换边界框被切割的一侧在底部切断下降器时起作用：

.font3 {
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
于 2018-10-28T21:22:24.867 回答