refactor(#194): added web-safe Tahoma font

Author: sametcodes

lib/@dsvgui/components/article/index.tsx

@@ -86,7 +86,7 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
                       <Text
                         x={0}
                         y={20 + title.length + index * 13}
-                        option={{ size: 12, weight: 400 }}
+                        option={{ size: 12, weight: 500 }}
                       >
                         {line}
                       </Text>

lib/@dsvgui/components/calendar/index.tsx

@@ -149,7 +149,7 @@ export const Calendar: React.FC<ICalendar> = ({
           key={monthString}
           x={x > 0 ? x : 0}
           y={166}
-          option={{ size: 12, weight: 400 }}
+          option={{ size: 12, weight: 500 }}
         >
           {monthString}
         </Text>

lib/@dsvgui/components/fallback/index.tsx

@@ -13,9 +13,9 @@ export const Fallback: React.FC<IFallback> = ({ title, message }) => {
 
   const subtitle = wrapText(
     message,
-    { maxLineWidth: width - 60, fontSize: 14, fontWeight: 400 },
+    { maxLineWidth: width - 60, fontSize: 14, fontWeight: 500 },
     (line, index) => (
-      <Text x={67} y={index * 16 + 40} option={{ size: 14, weight: 400 }}>
+      <Text x={67} y={index * 16 + 40} option={{ size: 14, weight: 500 }}>
         {line}
       </Text>
     )

lib/@dsvgui/components/flock/index.tsx

@@ -40,7 +40,7 @@ export const Flock: React.FC<IFlock> = ({
   const subtitleWidth = subtitle
     ? getTextWidth(subtitle.trim(), {
         fontSize: subtitleFontSize,
-        fontWeight: 400,
+        fontWeight: 500,
       })
     : 0;
 

lib/@dsvgui/components/line/index.tsx

@@ -128,7 +128,7 @@ export const Line: React.FC<ILine> = ({ items }) => {
             key={index}
             x={(textWidth) => i * xGap - textWidth / 2}
             y={0}
-            option={{ size: 8, weight: 300 }}
+            option={{ size: 8, weight: 500 }}
           >
             {periodLabel}
           </Text>

lib/@dsvgui/components/metrics/index.tsx

@@ -42,7 +42,7 @@ export const Metrics: React.FC<IMetrics> = ({ data, icon: Icon }) => {
           });
           const wValue = getTextWidth(item.value.toString(), {
             fontSize: 22,
-            fontWeight: 800,
+            fontWeight: 700,
           });
           const wText = Math.max(wValue, wTitle);
 
@@ -55,7 +55,7 @@ export const Metrics: React.FC<IMetrics> = ({ data, icon: Icon }) => {
               <Text x={xText} y={10} option="subtitle">
                 {item.title}
               </Text>
-              <Text x={xText} y={33.51} option={{ size: 22, weight: 800 }}>
+              <Text x={xText} y={33.51} option={{ size: 22, weight: 700 }}>
                 {item.value.toString()}
               </Text>
               {index !== 0 && (

lib/@dsvgui/document/branding.tsx

@@ -7,7 +7,7 @@ type IBranding = {
 
 export const Branding: React.FC<IBranding> = ({ x, y }) => {
   return (
-    <Text x={x} y={y} option={{ size: 8, weight: 400 }}>
+    <Text x={x} y={y} option={{ size: 8, weight: 500 }}>
       readme.rocks
     </Text>
   );

lib/@dsvgui/document/fonts/index.ts

@@ -2,10 +2,11 @@
 
 import * as Manrope from "./manrope";
 import * as OpenSans from "./opensans";
+import * as Tahoma from "./tahoma";
 
-const fonts = { Manrope, OpenSans };
+const fonts = { Manrope, OpenSans, Tahoma };
 
 export type FontFamily = keyof typeof fonts;
-export const defaultFont: FontFamily = "Manrope";
+export const defaultFont: FontFamily = "Tahoma";
 
 export default fonts;

lib/@dsvgui/document/fonts/tahoma/Tahoma-500.ttf

@@ -2,6 +2,7 @@ export const Style: React.FC = () => {
   return (
     <defs>
       <style>{`
+            .websafe{ font-family: Tahoma, Verdana, sans-serif }
             .text{ fill: #32373e;}
             .text.subtitle{ fill: #5c5c5c; }
 

lib/@dsvgui/document/fonts/tahoma/Tahoma-700.ttf

@@ -13,6 +13,7 @@ type IText = {
   y: number;
   option: IFontType | IFontOptions;
   children: string | number | undefined;
+  as?: "path" | "text";
 };
 
 const onHandFonts = {
@@ -26,7 +27,13 @@ const onHandFonts = {
   },
 };
 
-export const Text: React.FC<IText> = ({ x, y, option, children }) => {
+export const Text: React.FC<IText> = ({
+  x,
+  y,
+  option,
+  children,
+  as = "text",
+}) => {
   if (!children) return <></>;
   const defaultFontFamily = defaultFont;
 
@@ -40,10 +47,26 @@ export const Text: React.FC<IText> = ({ x, y, option, children }) => {
   if (typeof x === "function")
     x = x(openTypeFont.getAdvanceWidth(children.toString(), font.size));
 
-  const path = openTypeFont.getPath(children.toString(), x, y, font.size);
-  const pathSVG = path.toPathData(1);
-
   const classNames = ["text"];
   if (typeof option === "string") classNames.push(option);
-  return <path className={classNames.join(" ")} d={pathSVG} />;
+
+  if (as === "path") {
+    const path = openTypeFont.getPath(children.toString(), x, y, font.size);
+    const pathSVG = path.toPathData(1);
+
+    return <path className={classNames.join(" ")} d={pathSVG} />;
+  } else {
+    classNames.push("websafe");
+    return (
+      <text
+        x={x}
+        y={y}
+        className={classNames.join(" ")}
+        fontSize={font.size}
+        fontWeight={font.weight}
+      >
+        <tspan>{children}</tspan>
+      </text>
+    );
+  }
 };