Text stroke line css-CodePudding

i wanted to ask how will i make my text like the one in the image? Can someone help me? Thank you. This is the code i did so far. but it doesnt look like same

This is my code:

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="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/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
        />
        <link
          href="https://fonts.googleapis.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/[email protected]/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>

CodePudding user response：

You're not going to get exactly the same as that image using the same font, because that reference looks to have the lines outside the text shape, rather than making the outline itself wider.

Basically, a font is just a vector shape. If you make the outline visible as you have, you can see what the shape is. What you can't do in CSS is to change that shape (e.g. make it "fatter" as in your reference image). Because the "outline" reference you're chasing has the lines outside the actual letter, you can't do what you want.

There are a couple of options, though. The first is to try different font weights (e.g. bold, black, exra-bold, whatever's available). These will have fatter characters, so the outline may produce a result closer to what you want (whether you use -webkit-text-stroke as in your original code or some variant on text-shadow as in the other answer).

The second is to use an SVG (or even PNG) image instead of real text. However, if you're using this for actual content on your page, you'll need to make sure you've properly provided accessible information (alt attributes for images) so that people using screen readers can still use your website.

CodePudding user response：

You can stack as many text-shadow elements as you like in a CSS rule. Although you'll never get perfect results with fonts that have sharp external angles, you can get near-perfect results with rounded sans-serif fonts like the one you're using:

h2 {
  color: white;
  font-size: 6em;
  margin: 0;
  font-family: "Baloo";
  text-shadow: 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.googleapis.com/css?family=Baloo" rel="stylesheet">
<h2>Testing</h2>

The only problem you might have is that the text needs to be filled with a solid white colour. If you really need the text to be transparent inside the outline, then you'll have to use another method such as an SVG, as others have suggested.

I wrote a Python function to generate the shadow positions:

def css_outline(num_points, radius, units, colour):
    from math import cos, sin, pi
    shadows = []
    for i in range(num_points):
        t = i * 2 * pi / num_points
        x = sin(t) * radius
        y = cos(t) * radius
        shadows.append("%.3f%s %.3f%s %s" % (x, units, y, units, colour))
    return (', '.join(shadows))

The CSS in the above example was generated by calling css_outline(16, 0.075, 'em', '#608b31')

CodePudding user response：

try to do it with text-shadow...

here i'm adding 1px blue stroke

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