☰

사전 정의된 글꼴 ​​이름 목록에 대한 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.ttf2단계를 반복하십시오.
  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"]
    }
]

관련 정보