☰

为预定义字体名称列表生成 CSS 和 JSON 演示文稿

tag-icon • tag-icon bash shell-script osx
为预定义字体名称列表生成 CSS 和 JSON 演示文稿

我的文件夹中有一堆文件。它们的格式如下：

Font1-Regular.ttf
Font1-Bold.ttf
Font2-SomeString-Regular.ttf
Font3.ttf

我的目标是为每种字体创建 CSS 表示形式，并为每种字体类型创建一个 JSON 对象。对于上面的字体，它看起来像这样：

@font-face {
    font-family: "Font1-Regular";
    src: url("../assets/fonts/Font1-Regular.ttf");
}
@font-face {
    font-family: "Font1-Bold";
    src: url("../assets/fonts/Font1-Bold.ttf");
}
@font-face {
    font-family: "Font2-SomeString-Regular";
    src: url("../assets/fonts/Font2-SomeString-Regular.ttf");
}
@font-face {
    font-family: "Font3-Regular";
    src: url("../assets/fonts/Font3-Regular.ttf");
}

以及字体的 JSON 表示：

[
    {
      fontName: "Font1",
      fontTypes: ["Regular", "Bold"]
    },
    {
      fontName: "Font2-SomeString",
      fontTypes: ["Regular"]
    },
    {
      fontName: "Font3",
      fontTypes: ["Regular"]
    }
]

这是@font-faces创建的逻辑图：

  1. 检查是否包含-字符
  2. 如果是，则获取最后一个之后的字符串-并删除.ttf。还获取最后一个之前的字符串-。如果没有，请将文件重命名为{previusFontName}-Regular.ttf并重复步骤 2。
  3. 创建新@font-face标签并将其附加到我正在保存结果的文件中。

如何检查文件中是否包含字符，然后获取该字符前后的子字符串？

我想一旦我学会了如何创建@font-faces，我就可以处理 JSON 部分。

到目前为止的代码（返回一些语法错误）

find . -type f "*.ttf" -exec if [[{} =~ "-"]]; then echo {} else echo "FAIL" fi \;

答案1

我将用它awk来操纵并生成输出。

这是一个获取零件以帮助您继续前进的示例。

$:cat flist.fonts 
Font1-Regular.ttf
Font1-Bold.ttf
Font2-SomeString-Regular.ttf
Font3.ttf
a crap line

$:cat doit.awk
/^.*\.ttf/ {
 print NR, $0 # just prints the line number and line

 if (match($0,/([^-]+)-(.+)\.ttf/,arr)) { # find the 2 halves
 print "\tFirst part:", arr[1]
 print "\t2nd part:", arr[2] 
 if (match(arr[2],/([^-]+)-(.*)/,part2_arr)){ # check 2nd half for -
    print "\t\t2a:", part2_arr[1]
    print "\t\t2b:", part2_arr[2]
    } else {print "\t\tNo - in 2nd part"}
 } else 
 print "\tNo hyphen in name ??"
}

$:awk -f doit.awk flist.fonts
1 Font1-Regular.ttf
    First part: Font1
    2nd part: Regular
        No - in 2nd part
2 Font1-Bold.ttf
    First part: Font1
    2nd part: Bold
        No - in 2nd part
3 Font2-SomeString-Regular.ttf
    First part: Font2
    2nd part: SomeString-Regular
        2a: SomeString
        2b: Regular
4 Font3.ttf
    No hyphen in name ??
$:

您可以使用原始的 find 命令来生成文件列表，例如，

find . -type f "*.ttf" -print | awk -f doit.awk

答案2

awk解得到CSS推介会：

awk -F'.' '{ 
               fc=($1!~/-/? $1"-Regular":$1); 
               printf "@font-face {\n\tfont-family: \"%s\";\n\tsrc: url(\../assets/fonts/%s.%s\");\n}\n",fc,fc,$2 
           }' file

输出：

@font-face {
    font-family: "Font1-Regular";
    src: url("../assets/fonts/Font1-Regular.ttf");
}
@font-face {
    font-family: "Font1-Bold";
    src: url("../assets/fonts/Font1-Bold.ttf");
}
@font-face {
    font-family: "Font2-SomeString-Regular";
    src: url("../assets/fonts/Font2-SomeString-Regular.ttf");
}
@font-face {
    font-family: "Font3-Regular";
    src: url("../assets/fonts/Font3-Regular.ttf");
}

奖金awk解得到JSON推介会：

awk -F'.' '{ 
       if (/-/) { 
           len=split($1,a,"-"); 
           ft=a[len]; sub("-"ft,"",$1); ft="\""ft"\""; 
           if ($1 in fn) { fn[$1]=fn[$1]", "ft } else { fn[$1]=ft; c++ } 
       } else { 
           fn[$1]="\"Regular\""; c++ 
       } 
     }
     END{ 
         printf "[\n\t{\n"; 
         for (k in fn) printf "\t  fontName: \"%s\",\n\t  fontTypes: [%s]\n\t}%s\n",k, fn[k],(--c? ",":""); print "]" 
     }' file

输出：

[
    {
      fontName: "Font1",
      fontTypes: ["Regular", "Bold"]
    },
      fontName: "Font3",
      fontTypes: ["Regular"]
    },
      fontName: "Font2-SomeString",
      fontTypes: ["Regular"]
    }
]

相关内容