Hướng dẫn css text-stroke outside
How to add outside stroke for the text. I tried with -webkit-text-stroke: 10px black; and text-shadow but my text becomes thinner, I want to have font size 24px.
here is the image -> [1]: https://i.stack.imgur.com/5xMgn.png I wanted very thick stroke and only outlide
asked Sep 27, 2021 at 19:52
You can use a pseudo element with identical text content to the main text and give the pseudo element the text-stroke. It was shown on CSS Tricks.
answered Sep 27, 2021 at 20:17
JHethJHeth 5,5472 gold badges21 silver badges28 bronze badges @import "compass/css3"; -webkit-text-stroke: width of stroke; this one is pretty smooth answered Sep 27, 2021 at 19:59
1 Fonts on the web are essentially vector-based graphics. That’s why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data. Because they are vector, it would make sense if we could do things that other vector programs (e.g. Adobe Illustrator) can do with vector text, like draw a stroke around the individual characters. Well, we can! Example:
Or shorthand:
You might be thinking “Cool, but if only some browsers support this, if I set my text color to One possibility is this:
Shown here with @font-face font Anime Ace 2 by Nate Piekos: Another possibility is only applying when supported:
SupportDesktop
Mobile / Tablet
SimulationWe can take this a bit further by not relying on the WebKit proprietary entirely. We can use the This is a stroke using all text-shadow. Pretty
close to just as good as a real stroke. The primary issue is that you can only get 1px of stroke this way. Any more, and you see gaps. Any more with WebKit text stroke and there is issues too though, so it’s kind of a horse apiece.CombiningUsing both a stroke and a shadow can be a great effect. Let’s toss on a WebKit stroke, the all-around text-shadow stroke, as well as a deeper text-shadow stroke. Lookin’ good
DemoAlignmentIf you are familiar with Adobe Illustrator, you may know that you can align a stroke on the inside of a shape, outside, or centered. That option looks like this in the palette: From left to right: center, inside, outsideFor reasons unbeknownst to me, text in Illustrator can only be set to center stroke alignment as well. Once you expand the text into regular vector paths though, all three options become available. Reminder from Sam Frysteen: add a new stroke in the Appearance panel and move it below your text (basically mimics outside stroke alignment). From top to bottom: inside, centered, outside.Only outside text stroke alignment looks any good at all to me. It’s unfortunate, both for CSS and for Illustrator, that the unchangeable default is centered. The solution is just not to go too crazy with the thickness of your stroke border and things should be OK. Note: the text-shadow-only solution doesn’t have this problem, but also is unable to stroke any more than 1px. If you use a pseudo element, you can stroke the same text behind the original text and kinda fake outside stroke. We have a whole article on this alignment issue: Text Stroke: Stuck In The Middle With You. A minor bit of good news, the What we can’t doThere are other things that vector-based graphics programs can do with text. You can squish the letter horizontally / stretch them vertically. This type of text treatment is almost universally frowned upon, so no big loss that we can’t do that. You can also set type on an irregular line (like around a circle). It certainly would be cool to do this with web text. Perhaps we could set text to follow the border path of its parent element.
In Illustrator, we can also tell a stroke how to handle sharp corners: rounded, beveled, or mitered. These can have nice effects, are not possible on the web. However, the WebKit handling of corners is pretty nice at its default (whatever it is), and arguably nicer than any of the options in Illustrator. FanciesFor the record, you can use any type of color value for the color of stroke (hex, rgba, hsla, keyword). That means transparent strokes if you want them, which indeed “stack” in that if strokes overlap each other (common) they will be darker. As far as the keyframe animation, the stroke color will animate but the stroke width will not (weird).
More information
|