[css-fonts-4][editorial] starting a new color font example

svgeesus · svgeesus · commit b642af7c0612 · 2024-08-26T16:04:51.000+03:00
diff --git a/css-fonts-4/highlighter/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2 b/css-fonts-4/highlighter/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2
diff --git a/css-fonts-4/highlighter/monaspace.css b/css-fonts-4/highlighter/monaspace.css
@@ -0,0 +1,11 @@
+@font-face {
+  font-family: 'Monaspace';
+  src: 
+    url('/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2') 
+    format('woff2')
+  ;
+}
+code {
+  font-family: "Monaspace", monospace;
+  font-feature-settings: "colr", "calt";
+}
diff --git a/css-fonts-4/highlighter/monaspace.html b/css-fonts-4/highlighter/monaspace.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<style>
+  @font-face {
+    font-family: 'Monaspace';
+    src: 
+      url('./MonaspaceKrypton-SyntaxHighlighter-Regular.woff2') 
+      format('woff2');
+}
+textarea {
+  font-family: "Monaspace", monospace;
+  font-variant-ligatures: contextual common-ligatures;
+  font-variant-alternates: styleset(ss04);
+  xfont-feature-settings: "colr", "calt";
+  font-feature-settings: "colr";
+  background-color: #BBA;
+  width: 30em;
+  height: 6em;
+}
+</style>
+<textarea>
+    <div class="spoilers">
+        <strong>Yes, it's possible!</strong>
+        <small>...to some extent =)</small>
+    </div>
+</textarea>
diff --git a/css-fonts-4/monaspace.html b/css-fonts-4/monaspace.html
@@ -0,0 +1,19 @@
+<style>
+    @font-face {
+  font-family: 'Monaspace';
+  src: 
+    url('./MonaspaceKrypton-SyntaxHighlighter-Regular.woff2') 
+    format('woff2')
+  ;
+}
+textarea {
+  font-family: "Monaspace", monospace;
+  font-feature-settings: "colr", "calt";
+}
+</style>
+<textarea>
+    <div class="spoilers">
+        <strong>Yes, it's possible!</strong>
+        <small>...to some extent =)</small>
+      </div>
+</textarea>
