Boost Emoji Size
https://shkspr.mobi/blog/2024/04/use-css-to-boost-the-font-size-of-emoji-with-no-extra-markup
by edent
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>The emoji should be bigger than the text. That's ๐คฏ isn't it?</p>
<p>It works on plain ๐ and skin tone ๐๐ฟ ๐๐พ ๐๐ฝ ๐๐ผ ๐๐ป</p>
<p>Most flags work ๐ฏ๐ต ๐ฌ๐ง ๐ณ๐ฟ but not more complex ones in Chrome ๐ด๓ ง๓ ข๓ ท๓ ฌ๓ ณ๓ ฟ ๐ด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ ๐ด๓ ง๓ ข๓ ณ๓ ฃ๓ ด๓ ฟ ๐ด๓ ต๓ ณ๓ ด๓ ธ๓ ฟ ๐ดโโ ๏ธ and I don't know why.</p>
<p>Normal symbols with the variation selector-16 ยฉ๏ธ and some ZWJ ๐จโโค๏ธโ๐จ don't work</p>
<p>But I'm pretty ๐ธ with the result!</p>
<p>
<a href="https://shkspr.mobi/blog/2024/04/use-css-to-boost-the-font-size-of-emoji-with-no-extra-markup">Read more on @edent's blog</a>!
</p>
</body>
</html>CSS
body {
background: #eee;
color: #222; /* Change my color to yellow */
}
@font-face {
font-family: "emoji";
src: local('Apple Color Emoji'),
local('Android Emoji'),
local('Segoe UI Emoji'),
local('Noto Color Emoji'),
local(EmojiSymbols),
local(Symbola);
unicode-range: U+231A-231B, U+23E9-23EC, U+23F0, U+23F3, U+25FD-25FE, U+2614-2615, U+2648-2653, U+267F, U+2693, U+26A1, U+26AA-26AB, U+26BD-26BE, U+26C4-26C5, U+26CE, U+26D4, U+26EA, U+26F2-26F3, U+26F5, U+26FA, U+26FD, U+2705, U+270A-270B, U+2728, U+274C, U+274E, U+2753-2755, U+2757, U+2795-2797, U+27B0, U+27BF, U+2B1B-2B1C, U+2B50, U+2B55, U+FE0F, U+1F004, U+1F0CF, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F21A, U+1F22F, U+1F232-1F236, U+1F238-1F23A, U+1F250-1F251, U+1F300-1F320, U+1F32D-1F335, U+1F337-1F393, U+1F3A0-1F3CA, U+1F3CF-1F3D3, U+1F3E0-1F3F0, U+1F3F4, U+1F3F8-1F43E, U+1F440, U+1F442-1F4FC, U+1F4FF-1F53D, U+1F54B-1F567, U+1F57A, U+1F595-1F596, U+1F5A4, U+1F5FB-1F64F, U+1F680-1F6CC, U+1F6D0-1F6D2, U+1F6D5-1F6D7, U+1F6DC-1F6DF, U+1F6EB-1F6EC, U+1F6F4-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1FA7C, U+1FA80-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8;
size-adjust: 300%;
}
p {
font-family: "emoji", sans-serif;
font-weight: normal;
}