tideSDK + less.js + SVG font-face

Question

방금 ​​TideSDK를 사용해 .exe와 .app에 웹 사이트를 배포하기 시작했습니다. 대부분. 환상적입니다.

현재 내가 겪고있는 문제는 모든 CSS 스타일이 less.js 프레임 워크를 사용하여 .less 스타일로 작성된다는 것입니다. 여기에는 사용자 정의 글꼴이 선언되어 있으며 표준 웹 브라우저에 배포하면 해당 글꼴을 사용하는 모든 요소에 잘 적용됩니다.

Tide를 통해 배포 할 때 모든 스타일링을 무의미한 스타일 시트에서 꺼내서 다시 .CSS 파일에 넣지 않으면 어떤 종류의 컴파일이 있다고 생각합니다. Tide가 응용 프로그램의 실제보기를 배포 할 때 내부적으로 사용하는 시간 변경.

나는이 문제를 해결하는 방법을 모릅니다. 참고로, 나는 .svg 년대는 바로 적용되지 발견되고 있다는 것을 믿고 날 리드 조수 콘솔에서 모든

[Error] Error finding 

오류를받지 못했습니다.

UPDATE :

내가 SRC에 잘못된 구문을 사용했다 보인다 URL을 ('...'), 그래서 .less 파일의 CSS 실제로 자동으로 실패했다. 나는 꽤 이상한 [오류] 오류를 찾는 중입니다 ... .svg 파일을 지금 찾으십시오. 이 CSS 줄 안에있는 URL은 app : 3 번 앞에 추가됩니다.

Answer 1

이 문제를 조사한 지 몇 시간이 지난 후에 결국 알아 냈습니다.

SRC를 사용할 때

1. less.js 정말 이상한 경로 디렉토리를 뱉어 : URL을 ('...'), 당신은 이러한 프레임 워크의 조합을 사용하는 경우 물건의 커플주의해야

   이 해결책은 less에서 사용할 수있는 import 지시문을 사용하고 @c font-face 선언을 .css 스타일 시트 안에 넣을 수 있습니다. 일반 .css 스타일 시트를 가져 오면 less.js에 일반 .css로 처리하도록 알려주며 침을 뱉어 낸 다중 합성 된 URL은 발생하지 않습니다.

   @import "../css/style.css";

2. 가져 오기 지시어를 넣고 Chrome 관리자의 리소스 - 글꼴 아래에 SVG가 실제로 생성되었는지 확인한 후 SVG 파일 자체를 살펴본 후 CSS 이름 지정에 문제가 있는지 확인했습니다 SVG 파일의 규칙. 이 answer, 그리고 내 blog post에 따르면, 당신의 SVG 이름이 사용되어야한다 : 이름 지정 방식에

   글꼴 - 가족

값을 SVG 메타 데이터에서

src: url('YourSVGFont.svg#Silkscreen') format('svg'); 

실제로 글꼴 ID를 사용해야합니다. 적어도 제 경우에는 해결책이되어야합니다.

src: url('YourSVGFont.svg#slkscrb') format('svg'); 

블로그 게시물에 image이 삽입되어있어 내가 말하는 내용을 볼 수 있으며 SVG 메타 데이터에서이 두 이름이 어디에 위치하는지 볼 수 있습니다.