计划行为理论的实例:文本笔划行 css(line stroke font)

关于计划行为理论的实例的问题,在line stroke font中经常遇到, 我想问我如何使我的文本像图像中的那个?有人能帮我吗?谢谢。这是我到目前为止所做的代码。但它看起来不一样

我想问我如何使我的文本像图像中的那个?有人能帮我吗?谢谢。这是我到目前为止所做的代码。但它看起来不一样

这是我的代码:

 <!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>

enter image description here

2

您可以根据需要在 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')生成的

2

你不会得到完全相同的图像使用相同的字体,因为该引用看起来有线条的文本形状,而不是使轮廓本身更宽。

基本上,字体只是一个矢量形状。如果您使轮廓可见,则可以看到形状是什么。在 CSS 中不能做的是更改该形状(例如,使其像参考图像中的“更胖”)。由于您正在追逐的“大纲”参考具有外部实际字母的行,因此您无法执行所需的操作。

不过,有几个选项。首先是尝试不同的字体权重(例如粗体,黑色,exra-bold,任何可用的)。这些将具有较胖的字符,因此大纲可能会产生更接近您想要的结果(无论您在原始代码中使用-webkit-text-stroke还是在其他答案中使用text-上的某些变体)。

第二种是使用 SVG(甚至 PNG)图像而不是真实文本。但是,如果您将其用于页面上的实际内容,则需要确保您已正确提供了可访问的信息(图像的alt属性),以便使用屏幕阅读器的人仍然可以使用您的网站。

1

尝试使用 text-...

这里我添加了 1px 蓝色笔触

text-: -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue, 1px 1px 0 blue;

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(677)
如何清理c盘空间不影响系统:CSS不影响标签
上一篇
Css样式important:!重要标记不覆盖 CSS样式(important css tag)
下一篇

相关推荐

  • css参考手册:标题

    CSS参考手册是一本关于CSS语言的参考书,由W3C组织出版,包含了CSS语言的完整语法、属性、值和案例等。它提供了一个完整的CSS语言参考,可以帮助开发者快速学习和使用CSS语言,从而更好地创建网页。…

    2023-06-29 01:40:51
    0 98 17
  • css登录界面模板代码:登录你的账号,开启新的旅程

    CSS登录界面模板代码是一种使用CSS来制作登录界面的代码,它可以帮助开发者快速制作出美观且易于使用的登录界面,以下是一个简单的CSS登录界面模板代码:…

    2023-05-06 06:17:54
    0 36 35
  • html引用css文件:My Webpage Welcome to My Webpage!

    示例示例在html文件中引用css文件,可以使用标签,代码示例如下:其中,rel属性表示关系,type属性表示文件的类型,href属性表示css文件的路径。…

    2023-06-21 12:33:03
    0 71 12
  • css鼠标移入移出:标题

    CSS鼠标移入移出,可以使用CSS中的:hover伪类来实现,代码如下:上面的代码表示,当鼠标移入.example元素时,将其文字颜色改为白色。…

    2023-04-28 12:13:20
    0 53 83
  • css自动换行:标题

    CSS自动换行可以使用CSS的word-wrap属性来实现,代码如下:该属性有两个可选值:…

    2023-11-21 11:03:53
    0 96 81
  • css布局技巧:和3个段落 标题 段落1 段落2 段落3

    CSS布局技巧是指使用CSS来实现页面布局的方法。这些技巧可以帮助开发人员快速实现页面布局,并且可以更好地控制页面的外观和行为。…

    2023-04-17 01:31:53
    0 63 18
  • css 超出自动换行:这是一个标题

    css 超出自动换行,可以使用 css 的 word-wrap 属性来实现,该属性允许长单词或 URL 地址换行到下一行。代码如下:…

    2023-04-08 01:41:59
    0 42 74
  • css出现滚动条控制页面内容的浏览

    当页面内容超出浏览器窗口的大小,会出现滚动条,可以通过CSS来控制。例如:…

    2023-06-05 08:29:43
    0 94 70

发表评论

登录 后才能评论

评论列表(1条)