我想问我如何使我的文本像图像中的那个?有人能帮我吗?谢谢。这是我到目前为止所做的代码。但它看起来不一样
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta cht="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googlea.com/css?family=Baloo"
rel="stylesheet"
/>
</head>
<style>
h2 {
color: transparent;
font-size: 3em;
margin: 0;
font-family: "Baloo";
-webkit-text-stroke: 2pt #608b31;
}
</style>
<body>
<h2>Testing</h2>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
</html>
您可以根据需要在 CSS 规则中堆叠尽可能多的text-
元素。虽然使用具有锐利外部角度的字体永远不会获得完美的结果,但是使用像您使用的那种圆形无衬线字体可以获得近乎完美的结果:
h2 {
color: white;
font-size: 6em;
margin: 0;
font-family: "Baloo";
text-: 0.000em 0.075em #608b31, 0.029em 0.069em #608b31, 0.053em 0.053em #608b31, 0.069em 0.029em #608b31, 0.075em 0.000em #608b31, 0.069em -0.029em #608b31, 0.053em -0.053em #608b31, 0.029em -0.069em #608b31, 0.000em -0.075em #608b31, -0.029em -0.069em #608b31, -0.053em -0.053em #608b31, -0.069em -0.029em #608b31, -0.075em -0.000em #608b31, -0.069em 0.029em #608b31, -0.053em 0.053em #608b31, -0.029em 0.069em #608b31;
}
<link href="https://fonts.googlea.com/css?family=Baloo" rel="stylesheet">
<h2>Testing</h2>
您可能遇到的唯一问题是文本需要用纯白色填充。如果您真的需要文本在大纲内是透明的,那么您将不得不使用另一种方法,例如 SVG,正如其他人所建议的那样。
我写了一个 Python 函数来生成阴影位置:
def css_outline(num_points, radius, units, colour):
from math import cos, sin, pi
s = []
for i in range(num_points):
t = i * 2 * pi / num_points
x = sin(t) * radius
y = cos(t) * radius
s.append("%.3f%s %.3f%s %s" % (x, units, y, units, colour))
return (', '.join(s))
上面示例中的 CSS 是通过调用css_outline(16, 0.075, 'em', '#608b31')
生成的
你不会得到完全相同的图像使用相同的字体,因为该引用看起来有线条外的文本形状,而不是使轮廓本身更宽。
基本上,字体只是一个矢量形状。如果您使轮廓可见,则可以看到形状是什么。在 CSS 中不能做的是更改该形状(例如,使其像参考图像中的“更胖”)。由于您正在追逐的“大纲”参考具有外部实际字母的行,因此您无法执行所需的操作。
不过,有几个选项。首先是尝试不同的字体权重(例如粗体,黑色,exra-bold,任何可用的)。这些将具有较胖的字符,因此大纲可能会产生更接近您想要的结果(无论您在原始代码中使用-webkit-text-stroke
还是在其他答案中使用text-
上的某些变体)。
第二种是使用 SVG(甚至 PNG)图像而不是真实文本。但是,如果您将其用于页面上的实际内容,则需要确保您已正确提供了可访问的信息(图像的alt
属性),以便使用屏幕阅读器的人仍然可以使用您的网站。
尝试使用 text-...
这里我添加了 1px 蓝色笔触
text-: -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue, 1px 1px 0 blue;
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(1条)