웹 응용 프로그램에 글꼴이 적용되지 않았습니다.

Question

grailsfontopen sans이라는 웹 응용 프로그램을 적용하려고하는데이 웹 응용 프로그램에는 적용되지 않았습니다. 내가 따랐다 절차는 : 나는 내 안에 아래 코드를 삽입 한

extended.css 파일 내가 무엇을 놓치고

@font-face { 
    src: url('../../images/font/openSans.woff'); 
    font-family: 'open sans'; 
    /*url('openSans.woff') format('woff'),*/ 
    font-style: normal; 
    font-weight: normal; 
} 

body{ 
    font-family: 'open sans'; 
} 

?

Answer 1

Open Sans은 Google 글꼴이므로 link에 설명 된대로 응용 프로그램에서 사용할 수 있습니다. 보기 또는 레이아웃

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 

구글 글꼴 API는 글꼴을 사용하는 데 필요한 브라우저 별 CSS를 생성에 다음

추가. CSS 스타일에 글꼴 이름을 추가하기 만하면됩니다. 예 :

font-family: 'Open Sans', sans-serif; 

예 : here을 참조하십시오.

Answer 2

모든 웹 사이트에서 글꼴을 다운로드하십시오. 은 webFont Generator입니다. zip 파일을 생성합니다. .css 파일로 가져 와서 스타일 태그 내에서 웹의 코드를 복사하여 붙여 넣습니다. 또한 모든 파일을 동일한 디렉토리에 붙여 넣으십시오. 그것은 모든 브라우저를 실행할 것입니다.

@font-face { 
font-family: 'Philosopher'; 
src: url('WebRoot/fonts/philosopher-regular.eot'); 
src: url('WebRoot/fonts/philosopher-regular.eot?#iefix') format('embedded-opentype'), 
    url('WebRoot/fonts/philosopher-regular.woff') format('woff'), 
    url('WebRoot/fonts/philosopher-regular.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; 
} 

body{ 
font-size: 13px; 
    font-family: "Philosopher"; 
} 

이 코드 단편은 philospher 글꼴에 해당됩니다. 이 예제를 기반으로 모든 글꼴을 사용할 수 있습니다. 즐기십시오.