To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers. For example, use md:subpixel-antialiased to apply the subpixel-antialiased utility at only medium screen sizes and above. You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use hover:subpixel-antialiased to only apply the subpixel-antialiased utility on hover.įor a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation. Firefox has also implemented a similar property called -moz-osx-font-smoothing, and it’s available from version 25. The css rule -webkit-font-smoothing: antialiased has been applied to all This results in browsers using the greyscale antialiasing method rather than default. Tailwind lets you conditionally apply utility classes in different states using variant modifiers. So as the title suggest what does the webkit-font-smoothing do I've used this in my CSS for multiple projects but what does it actually do I'm going to guess it has something to do with the font but what does it do exactly I've removed it from the CSS multiple but it doesn't seem to affect anything. In WebKit, we will use the -webkit-font-smoothing property. not sure if theres a spec, so far its webkit only, i believe. Use the subpixel-antialiased utility to render text using subpixel antialiasing and the antialiased utility to render text using grayscale antialiasing.Īpplying conditionally Hover, focus, and other states is there standard spec for this prop or it is vendor specific. Mainly because it essentially cuts font pixels in half, it also only works on webkit. auto Let the browser decide (Uses subpixel anti-aliasing when available this is the default) none Turn font smoothing off display text with jagged sharp edges.
webkit-font-smoothing: auto -moz-osx-font-smoothing: auto Font smoothing is interesting, especially with an antialiased property. WebKit implements a similar property, but with different values: -webkit-font-smoothing. webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale
0 kommentar(er)
