Ways to eliminate unnecessary spacing in CSS text-stroke

I am trying to achieve a text-stroke effect with transparent text over an image. However, I am facing an issue where the text-stroke also displays lines within the text itself. I am using the Montserrat font from Google Fonts. Can anyone provide assistance?

Below are my HTML and CSS codes:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=block');

.header-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 66px;
  font-weight: 900;
  line-height: 117.02px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
}
<h1 class="header-title">ABCD EFGH</h1>

htmlcsstextborder

Answer №1

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=block');

.container {
  min-height: 100vh;
  background: url('https://imgs.search.brave.com/GlZ-EO67MwBX5URzZNAF3Y7KBf6z2s2fr21P2ZemVqY/rs:fit:1200:1200:1/g:ce/aHR0cDovL3d3dy5w/aXhlbHN0YWxrLm5l/dC93cC1jb250ZW50/L3VwbG9hZHMvMjAx/Ni8wNi9IRC1KdW5n/bGUtSW1hZ2UuanBn');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.alt {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
  font-size: 33px;
  font-weight: 900;
  
  -webkit-font-smoothing: antialiased;
  font-family: 'Montserrat', sans-serif;
}
<div class="container">
  <h1 class="alt">XYZ WXYZ</h1>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a PHP-powered contact form for sending emails

I've been trying to set up a contact form, but I'm struggling to make it work. I downloaded a PHP contact form script, but I can't figure out how to get it functioning. Despite searching extensively on Google and here, I haven't found a ...

phphtmlcontact-form

Jquery submenu accordion toggles open and closed with each click

My website has a hamburger menu with an accordion-style submenu implemented using jQuery for devices 1084px and smaller. For larger devices, the menu utilizes a hover-style submenu on desktop. However, I encountered issues when trying to use both the hove ...

javascripthtmljquerycss

Can you please explain the purpose of this function?

I came across this code snippet on a website and I'm curious about its function and purpose. While I'm familiar with PHP, HTML, CSS, and JavaScript, I haven't had the chance to learn JQUERY and AJAX yet. Specifically, I'm interested in ...

javascriptjquerycss

What are the methods for adjusting the height of one div in relation to another div?

How can I make the height of the first div equal to the dynamic height of the second div, when the second div contains a lot of dynamic data with an unpredictable height? <div style="width: 100%;"> <div class=& ...

javascripthtmlcssbootstrap-4

Initiating an audio call exclusively via SimpleWebRTC

I'm currently utilizing a jQuery plugin for WebRTC found here. My goal is to initiate an audio call only, but I am struggling to find a function within the plugin that allows for this. The code snippet I am using with autoRequestMedia set to false is ...

javascriptjqueryhtmlwebrtchtml5-audio

I am attempting to separate this "for" loop in order to generate five distinct DIV elements

Hello there! I am a beginner and I am attempting to create 5 different players by using some code that I found. Here is the code I have been working with: https://codepen.io/katzkode/pen/ZbxYYG My goal is to divide the loop below into 5 separate divs for ...

javascriptjqueryhtmlcss

How to make a specific table row stand out using AngularJS and CSS

Can you provide advice on how to highlight a specific row in a table? I have a table along with some angular code snippets. Here's an example: angular.module('myApp', []).controller('myTest', function($scope) { var data = []; ...

javascripthtmlcssangularjs

What is the best way to update auto margins after resizing an element with Javascript?

I'm having an issue with a DIV on my webpage that is centered using margin-left and margin-right set to auto. When I try to resize the DIV, it no longer stays centered on the screen. <div id="content" style="margin-left:auto;margin-right:auto;widt ...

javascriptjquerycss

Difficulty with alignment in the process of generating a vertical stepper using HTML and CSS

I'm currently working on developing a vertical stepper component using html & css with inspiration from this design. However, I've encountered some alignment issues in the css that I'm struggling to resolve. CSS .steps-container .step::b ...

htmlcss

Steps for transferring an `<li>` element from one `<ul>` to another

<ul id="List"> <li class="li">1</li> <li class="li">2</li> </ul> <ul id="List2"></ul> const items = document.querySelectorAll(".li"); for(var i = 0; i < ...

javascripthtmljquery

JavaScript may not display height as anticipated

Currently, I am experimenting with JavaScript in order to achieve a website section that is 100% the height of the screen minus the "nav" bar. Imagine it as having two visible components - the first one being large and the second one small at the bottom. ...

javascriptjqueryhtmlcss

MS Edge modifies the attribute's empty value to 1

I have written a JavaScript code to extract values from a list, but in the Windows Edge browser, it returns a value of 1 even when the actual value of the <li> tag is blank. For example: HTML Code <ul> <li value="">Test 1</li&g ...

javascriptjqueryhtmlmicrosoft-edge

The jQuery .each function is malfunctioning specifically on Google Chrome browsers

I developed a web application that utilizes jQuery to automatically submit all forms on the page. The code snippet is as follows: $('form').each(function() { $(this).submit(); }); While this functionality works perfectly in Internet Explore ...

javascriptjqueryhtmlgoogle-chromesubmit

I am attempting to assign a default value to a TextField by retrieving data from a GetMapping call in React, however, the value is not being successfully set

I am facing an issue with setting a default value for a TextField in my code. Even though I am trying to populate it with data from a GetMapping call, the value is not being set as expected. Here is the JSON response I receive from the API call: { "id": 1 ...

javascripthtmlreactjsmaterial-ui

In Python using Selenium, the text property of a WebElement may cut off duplicate whitespaces

Today, I came across an interesting observation regarding the text property of WebElement. Here is a PDF link that sparked my curiosity: https://i.stack.imgur.com/1cbPj.png Upon closer inspection, I noticed that the file name contains triple whitespace. W ...

pythonhtmlseleniumdomselenium-webdriver

Getting elements in order with bootstrap

Can you help me align the "Format Example" string with the textual labels of the input fields without using static width in AngularJS with Bootstrap? The current alignment is right-justified but I would like it to be more dynamic as shown in the screenshot ...

htmlcssangularjstwitter-bootstrap

Creating a mobile-friendly layout with 3 columns: Tips and tricks

I attempted to solve the issue independently but didn't have much success. My goal is to create a proper version for mobile users using bootstrap, however, it currently looks terrible on mobile devices. I suspect the problem lies with the div classes ...

htmltwitter-bootstrapcssmobile

Creating square elements using only HTML and CSS

This is just a longer text to demonstrate multiple lines being centered. ...

htmlcss

On a Samsung tablet with Moodle, the body background image is set to display at the top

Encountered an issue with Sambungs tables. I have a background image set on the body. Here is how the CSS looks: html, body{ background: url('img/background.jpg') no-repeat; background-position: top; // I also tried cover, fixed, etc } The ...

htmlcssmoodle

Discover the secret to creating a seamless looping effect on text using CSS gradients, giving the illusion of an endless loop

Could use some assistance with looping this gradient smoothly over the text without any annoying jumps appearing during the animation. Is there a way to achieve a seamless movement across the text? Any suggestions on how to approach this? Here is a liv ...

htmlcss