☰

事前定義されたフォント名リストの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

アッ解決済み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");
}

ボーナスアッ解決済み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"]
    }
]

関連情報