2013-11-03 7 views
2

사용자 정의 글꼴을 phantomJS로 렌더링하려고하면 굵게 및 기울임 꼴 태그가 작동하지 않거나 적용되지 않습니다.PhantomJS를 사용하는 사용자 정의 글꼴에 Bold/Italic이 적용되지 않습니다.

내 CSS는 모두 <style> 태그의 <head>에있는 HTML 템플릿에 직접 있습니다. 여기

내가 가진 무엇인가에 다음

@font-face { 
    font-family: userSelectedFont; 
    src: url("/usr/share/fonts/dejavu/DejaVuSerif.ttf"); 
} 

그리고 내 <body> :

<div style="font-family: userSelectedFont, sans-serif;"><strong><em>Test</em></strong></div> 

그러나 phantomJS이 이미지 생성 : Good font but not in bold or italic

그것은 확실히 좋은 글꼴을 사용하지만 아니에요을 굵게 기울임 꼴을 적용합니다. 아이디어가 있으십니까?

PS : 나는 그것을 굵게 및 기울임 꼴 잘 작동 style="font-family: userSelectedFont-7, sans-serif;" 부분을 ... 삭제하면

답변

3

난 그냥 해결책을 발견했다. 당신은 font-style과에 font-weight를 제공 할 필요가 당신의 font-face 다음

내 마지막 코드 :

@font-face { 
    font-family: 'userSelectedFont'; 
    font-style: normal; 
    font-weight: normal; 
    src: url("/usr/share/fonts/dejavu/DejaVuSerif.ttf"); 
} 
+0

좋은 중. 굵은 텍스트를 원할 때도 서체면에서 노말을 지정한 다음 실제 선택자에서 굵은 글꼴을 선택해야합니다. – DanV

+1

팬텀 2.x 이후에는 작동하지 않습니다. ( –

0

보통, 굵게, 기울임 꼴, 굵게 기울임 꼴 별도의 TTF 파일입니다, 당신은 별도의를 작성해야 각각에 대해 @font-face 규칙 :

@font-face { 
    font-family: 'userSelectedFont'; 
    font-style: normal; 
    font-weight: normal; 
    src: url(".../DejaVuSerif.ttf"); 
} 
@font-face { 
    font-family: 'userSelectedFont'; 
    font-style: normal; 
    font-weight: bold; 
    src: url(".../DejaVuSerif-Bold.ttf"); 
} 
@font-face { 
    font-family: 'userSelectedFont'; 
    font-style: italic; 
    font-weight: normal; 
    src: url(".../DejaVuSerif-Italic.ttf"); 
} 
@font-face { 
    font-family: 'userSelectedFont'; 
    font-style: italic; 
    font-weight: bold; 
    src: url(".../DejaVuSerif-BoldItalic.ttf"); 
} 

그런 설정 font-family: "userSelectedFont"; font-weight: bold 예상대로 몇 가지 요소가 작동에 (예를 들어).

이것은 PhantomJS의 버그는 아닙니다. 작동하는 방법은 @font-face입니다.

+0

아니요, 별개로 추가 할 필요가 없습니다. 예를 들어 볼드체는 정의 된 폰트를 고려하여 모든 폰트를 더 굵게 보일 CSS 속성으로 존재합니다. 하나의 글꼴 (보통)로이 피들을 간단히 살펴보십시오 : https : //jsfiddle.net/ghzs1egj/1/ 모든 브라우저는 2.x 버전이 릴리스 된 이후 Phantom을 제대로 표시하지 않으므로 분명히 버그입니다. –

관련 문제