feat: add font fallbacks, close #14

Renovamen · Jul 5, 2024 · 179752b · 179752b
1 parent ad5b939
commit 179752b
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/site/src/utils/css.ts b/site/src/utils/css.ts
@@ -23,34 +23,34 @@ export class DynamicCssService {
 
   private themeColor = (selector: string, styles: ResumeStyles) => {
     return (
-      `${selector} :not(.resume-header-item) > a { color: ${styles.themeColor} }` +
-      `${selector} h1, ${selector} h2, ${selector} h3 { color: ${styles.themeColor} }` +
-      `${selector} h2 { border-bottom-color: ${styles.themeColor} }`
+      `${selector} :not(.resume-header-item) > a { color: ${styles.themeColor}; }` +
+      `${selector} h1, ${selector} h2, ${selector} h3 { color: ${styles.themeColor}; }` +
+      `${selector} h2 { border-bottom-color: ${styles.themeColor}; }`
     );
   };
 
   private lineHeight = (selector: string, styles: ResumeStyles) => {
     const height = styles.lineHeight;
 
     return (
-      `${selector} p, ${selector} li { line-height: ${height.toFixed(2)} }` +
-      `${selector} h2, ${selector} h3 { line-height: ${(height * 1.154).toFixed(2)} }` +
-      `${selector} dl { line-height: ${(height * 1.038).toFixed(2)} }`
+      `${selector} p, ${selector} li { line-height: ${height.toFixed(2)}; }` +
+      `${selector} h2, ${selector} h3 { line-height: ${(height * 1.154).toFixed(2)}; }` +
+      `${selector} dl { line-height: ${(height * 1.038).toFixed(2)}; }`
     );
   };
 
   private paragraphSpace = (selector: string, styles: ResumeStyles) => {
-    return `${selector} h2 { margin-top: ${styles.paragraphSpace}px }`;
+    return `${selector} h2 { margin-top: ${styles.paragraphSpace}px; }`;
   };
 
   private fontFamily = (selector: string, styles: ResumeStyles) => {
     const fontEN = styles.fontEN.fontFamily || styles.fontEN.name;
     const fontCJK = styles.fontCJK.fontFamily || styles.fontCJK.name;
-    return `${selector} { font-family: ${fontEN}, ${fontCJK} }`;
+    return `${selector} { font-family: ${fontEN}, ${fontCJK}, Arial, Helvetica, sans-serif; }`;
   };
 
   private fontSize = (selector: string, styles: ResumeStyles) => {
-    return `${selector} { font-size: ${styles.fontSize}px }`;
+    return `${selector} { font-size: ${styles.fontSize}px; }`;
   };
 
   private paperSize = (styles: ResumeStyles) => {