优化字体样式

amazecc · Aug 22, 2024 · b801a15 · b801a15
1 parent d55a904
commit b801a15
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -44,6 +44,8 @@ npx iconfont start [--port 8080]
 
 2. 配置内容
 
+以下配置为全部字段，具体是否可选可参考类型定义
+
 ```javascript
 import { getSvgTSReactComponentContent, toBigCamelCase } from "iconfont-spanner";
 
@@ -53,16 +55,36 @@ export default {
     output: {
         // 生成和字体
         font: {
+            // 输出目录
             dir: "src/font",
+            // 字体名称
             name: "iconfont",
+            // 生成的字体格式，支持 "ttf", "woff", "woff2"
             types: ["ttf", "woff", "woff2"],
+            // 格式化输出内容，type 为 "css" | "typescript"
+            format: (content, type) => content, // 可以使用格式化程序处理 content
+            // 自定义字体样式
+            style: fontName => {
+                return `
+					font-family: "${fontName}" !important; // 默认
+					font-style: normal; // 默认
+					-webkit-font-smoothing: antialiased; // 默认
+					-moz-osx-font-smoothing: grayscale; // 默认
+					font-size: 1em; // ------> 自定义样式
+				`;
+            },
         },
         // 转化为组件，比如 react 组件
         component: {
+            // 输出目录
             dir: "src/font/components",
+            // 组件文件名，需要带上文件扩展名
             fileFullName: fileName => `${toBigCamelCase(fileName)}.tsx`,
+            // 组件名称
             name: fileName => toBigCamelCase(fileName),
+            // 组件内容
             content: getSvgTSReactComponentContent,
+            // 是否使用 currentColor 填充 svg fill 属性，如果不填充，则保留原色，可以用来实现彩色图标
             fillCurrentColor: fileName => !fileName.endsWith("_oc"),
         },
     },

diff --git a/src/utils/FontManager/Font.ts b/src/utils/FontManager/Font.ts
@@ -4,7 +4,7 @@ import SVGIcons2SVGFontStream, { type Metadata } from "svgicons2svgfont";
 import svg2ttf from "svg2ttf";
 import ttf2woff2 from "ttf2woff2";
 import ttf2woff from "ttf2woff";
-import { getTypeDeclarationString, getCssString, getAbsolutePath } from "./utils.js";
+import { getTypeDeclarationString, getCssString, getAbsolutePath, getDefaultFontStyle } from "./utils.js";
 
 export type FontType = "ttf" | "woff" | "woff2";
 
@@ -18,7 +18,24 @@ export interface FontOption {
      * @default ["ttf", "woff", "woff2"]
      */
     types?: FontType[];
-    /** 针对生成文件内容进行格式化 */
+    /**
+     * 自定义字体样式
+     * @param name 字体名称
+     * @returns css 样式字符串
+     * @default
+     * ```tsx
+     * (name: string) => {
+     * 	return `
+     * 		font-family: "${name}" !important;
+     * 		font-style: normal;
+     * 		-webkit-font-smoothing: antialiased;
+     * 		-moz-osx-font-smoothing: grayscale;
+     * `;
+     * }
+     * ```
+     */
+    style?: (name: string) => string;
+    /** 可针对生成文件内容进行格式化 */
     format?: (content: string, type: "css" | "typescript") => string | Promise<string>;
 }
 
@@ -55,6 +72,7 @@ export class Font {
         this.option = {
             types: ["ttf", "woff", "woff2"],
             format: content => content,
+            style: getDefaultFontStyle,
             ...option,
             dir: getAbsolutePath(option.dir),
         };
@@ -105,8 +123,8 @@ export class Font {
 
     /** 写入 css 文件 */
     private async writeCSSFile() {
-        const { name, types, format } = this.option;
-        const cssString = await format(getCssString(name, types, this.metadata), "css");
+        const { name, types, format, style } = this.option;
+        const cssString = await format(getCssString(name, types, style, this.metadata), "css");
         fs.writeFileSync(this.getOutputPath("css"), cssString);
     }
 

diff --git a/src/utils/FontManager/utils.ts b/src/utils/FontManager/utils.ts
@@ -126,8 +126,17 @@ export const ${toCamelCase(fontName)}HTMLUnicode = {
 `;
 };
 
+export const getDefaultFontStyle = (fontName: string) => {
+    return `
+	font-family: "${fontName}" !important;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+`;
+};
+
 /** 生成 css 文件 */
-export const getCssString = (fontName: string, fontTypes: FontType[], metadata: FontMetadata[]) => {
+export const getCssString = (fontName: string, fontTypes: FontType[], style: (fontName: string) => string, metadata: FontMetadata[]) => {
     const now = Date.now();
     return `
 @font-face {
@@ -141,13 +150,7 @@ export const getCssString = (fontName: string, fontTypes: FontType[], metadata:
         .join(",\n\t\t")};
 }
 
-.${fontName} {
-    font-family: "${fontName}" !important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
+.${fontName} {${style(fontName)}}
 ${metadata
     .map(item => {
         return `