使用 CSS 应用颜色渐变时文本被截断

Question

我一直在学习前端 Web 开发的基础知识并开始做“Odin 项目”

我在 Git-Hub 上看到了一个仅使用 HTML 和 CSS 的网站示例。

我尝试汲取一些灵感并制作自己的版本。

我添加了一些文本，想看看是否可以使用 CSS 添加渐变到文本。

许多使用 CSS 的示例都使用相同类型的代码

-webkit-background-clip: text   background-clip: text; color: transparent;

在我导入此自定义文本之前它工作正常：https://www.dafont.com/the-sunset.font 我做了一个

标签，看起来它把右侧的边缘切掉了。

正如您在代码图像中看到的，最后一个字符似乎被切断了

它与其他字体配合使用效果更好，但我想使用该字体。

还有其他方法可以制作渐变文本而不会出现此类问题吗？

即使它是用 Javascript 编写的，我仍然没有学到任何东西或者类似的东西粗鲁？我不介意等到我最终必须学习它时，我被告知编码是一个终生的过程。

我的另一个问题是关于代码本身而不是渐变文本，我写的内容是良好的做法吗？比我已经在做的事情更好的方法？这可能是因为我只学习了几周。

我很感激任何答案，谢谢！

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mine.css">
</head>
<body>
    




<div class="container">

  <div class="block1">
    <h2 class="block2">SunSet</h2>
  </div>

<div class="block3"></div>
<div class="block4"></div>
</div>



</body>
</html>

CSS

@import url("myfont.css");


 
body {

    margin: 0;
    padding: 0;
}




.container .block1 {
    background: url(../css/train.png) no-repeat center center fixed;
    background-size: cover;
    height: 1000px;
    position: relative;
}



.container  .block2 {

    padding: 0px;
    top: 20px;
    left: 50px;
    position: absolute;
    font-family: Bingo;
    font-size: 150px;
    background: linear-gradient(45deg, #ff7e5f, #feb47b, #ff7e5f); 
    -webkit-background-clip: text; 
    background-clip: text;
    color: transparent; 
}

字体CSS

@font-face {
    font-family:'Bingo'; /* Choose a name for your font */
    src: url('../css/Bont/The-Sunset.ttf') format('truetype'); /* Adjust the path and format based on your font file */
    /* Add additional src entries for other font formats if needed (e.g., woff, woff2) */
  }

忽略“Bingo”等字体名称和文件夹名称“Bont”，我只是命名一些非常奇怪的东西。

我尝试删除除了我在 css 中调用来放置图像的那个 div 之外的所有内容，因为也许有另一个 div 剪切了文本的末尾，但情况似乎并非如此。

更改字体似乎会混淆它，但我不确定我的想法是否有问题，但我拒绝使用另一种字体来解决问题，因为我想使用该字体我应该能够使用它字体...对吗？

如果您选择文本，您会看到它被裁剪基于实际的字形/字符边界框。

小写字母

超出了边界框（由其度量定义：左侧和右侧轴承）。

因此您可以添加

width:100%

属性将遮罩扩展到全宽。

@font-face {
    font-family: 'The Sunset';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
  margin: 0;
  padding: 0;
}


.container .block2 {
  font-family: "The Sunset";
  padding: 0px;
  top: 20px;
  left: 0px;
  width: 100%;
  text-align:center;
  position: absolute;
  font-size: 150px;
  font-weight: 400;
  background-image: linear-gradient(45deg, #ff7e5f, #feb47b, #ff7e5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid red;
}

<div class="container">
  <div class="block1">
    <h2 class="block2">SunSet</h2>
  </div>

  <div class="block3"></div>
  <div class="block4"></div>
</div>

Answer 1

如果您选择文本，您会看到它被裁剪基于实际的字形/字符边界框。

小写字母

超出了边界框（由其度量定义：左侧和右侧轴承）。

因此您可以添加

width:100%

属性将遮罩扩展到全宽。

@font-face {
    font-family: 'The Sunset';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
  margin: 0;
  padding: 0;
}


.container .block2 {
  font-family: "The Sunset";
  padding: 0px;
  top: 20px;
  left: 0px;
  width: 100%;
  text-align:center;
  position: absolute;
  font-size: 150px;
  font-weight: 400;
  background-image: linear-gradient(45deg, #ff7e5f, #feb47b, #ff7e5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid red;
}

<div class="container">
  <div class="block1">
    <h2 class="block2">SunSet</h2>
  </div>

  <div class="block3"></div>
  <div class="block4"></div>
</div>

使用 CSS 应用颜色渐变时文本被截断

问题描述投票：0回答：1

1个回答

最新问题

使用 CSS 应用颜色渐变时文本被截断

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1