Subpixel VS Grayscale anti-aliasing

Developer
Keyamoon
Size
2,714 Kb
Views
4,046
  1. Subpixel VS Grayscale anti-aliasing Previews
  2. Subpixel VS Grayscale anti-aliasing HTML Codes
  3. Subpixel VS Grayscale anti-aliasing CSS Codes

How do I make an subpixel vs grayscale anti-aliasing?

The glyph on left is shown with the default (subpixel) antialiasing while the one on right is using grayscale anti-aliasing.. What is a subpixel vs grayscale anti-aliasing? How do you make a subpixel vs grayscale anti-aliasing? This script and codes were developed by Keyamoon on 25 January 2023, Wednesday.

Subpixel VS Grayscale anti-aliasing Previews
IQ Test

Subpixel VS Grayscale anti-aliasing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subpixel VS Grayscale anti-aliasing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class="glyph-lines"></span>
<span class="glyph-lines grayscale"></span>
</body>
</html>

Subpixel VS Grayscale anti-aliasing - Script Codes CSS Codes

body { font-family: sans-serif; font-size: 32px; margin: 2em;
}
.grayscale { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
span { width: 3em; float: left;
}
@font-face { font-family: 'test'; src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBSoAAAC8AAAAYGNtYXAXVtKHAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZroGA8wAAAF4AAAAdGhlYWQN8unZAAAB7AAAADZoaGVhB8IDxgAAAiQAAAAkaG10eAoAAAAAAAJIAAAAFGxvY2EAKABOAAACXAAAAAxtYXhwAAkADgAAAmgAAAAgbmFtZZlKCfsAAAKIAAABhnBvc3QAAwAAAAAEEAAAACAAAwMAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAAPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QD//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAADAAD/wAQAA8AAAwAHAAsAABMzESMBMxEjATMRIwCAgAHAgIABwICAA8D8AAQA/AAEAPwAAAAAAAEAAAABAAAK8njBXw889QALBAAAAAAA1WnSrgAAAADVadKuAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAUEAAAAAAAAAAAAAAACAAAABAAAAAAAAAAACgAUAB4AOgABAAAABQAMAAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype'); font-weight: normal; font-style: normal;
}
[class^="glyph-"], [class*=" glyph-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'test' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;
}
.glyph-lines:before { content: "\e900";
}
Subpixel VS Grayscale anti-aliasing - Script Codes
Subpixel VS Grayscale anti-aliasing - Script Codes
Home Page Home
Developer Keyamoon
Username Keyamoon
Uploaded January 25, 2023
Rating 3
Size 2,714 Kb
Views 4,046
Do you need developer help for Subpixel VS Grayscale anti-aliasing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keyamoon (Keyamoon) Script Codes
Name
A Pen by Keyamoon
Low Carb VS Low Fat
Inline SVG example
A multicolor icon made by stacking font glyphs
Spinners using Font Icons
Inline SVGs and CSS Vars
Header Line
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!