@ font-face가 localhost에서만 작동하는 이유는 무엇입니까?

Question

필자는 새 사이트에서 @ font-face를 사용했지만 FF와 Chrome의 localhost에서 잘 작동합니다. 그러나 내 서버에 업로드 할 때 FF 또는 Chrome 글꼴을 볼 수 없습니다. 가능한 원인은 무엇일까요?

내 웹 사이트 http://leojiang.me

Answer 1

Shad가 문제를 발견했습니다. "규칙 본문, 버튼, 입력, 선택, 텍스트 세분화가 추가되어 산 세리프 글꼴로 설정됩니다."

감사합니다.

Answer 2

당신의 글꼴 familly 이름이 잘못 될 수 있습니다 .. 이 하나

글꼴 - 가족하려고 'ColaborateThinRegular를';

http://www.fontsquirrel.com/fontfacedemo/Colaborate 페이지의 소스 코드를 확인하십시오.

Answer 3

사이트를 디버깅하는 동안 문제를 쉽게 찾을 수 있도록 읽기 쉬운 CSS 스크립트가 필요할 수 있습니다. 압축은 모든 것이 의도 한대로 작동 할 때만 수행되어야합니다. 지금 당신은 더 명확하게 그것을보고이 사이트에 붙여 넣기/복사 할 수 있습니다에 대한

: http://www.digitalcoding.com/tools/css-beautifier.html

나는 @media 인쇄 및 @page에 대한 나중에 하나의 비트를 의심했다. 그것들이 제대로 설정되었는지 확신 할 수 없습니다. 먼저 웹 렌더링 문제를 해결하는 데 도움이되는 인쇄물을 주석으로 작성하여 웹 사이트에 집중하는 것이 좋습니다. 사용하려는 다양한 요소가 모두 포함 된 테스트 HTML 페이지를 설정하고 3D 모양을 통합하기 전에 제대로 작동하는지 확인해야 할 수 있습니다. html 파일을 만들고 해당 클래스를 제거하면 모든 것을 기본 웹 페이지로 렌더링하는 방법을 볼 수 있습니다.

Ettiene이 말했듯이, 코드가 Lucida Grande와 Courier에게 다른 요소의 글꼴을 설정하는 몇 개의 지점이 있습니다. 이 위치에서 원하는 글꼴 이름 인 ColThin을 참조해야합니다. 이름을 어떻게 지어 주느냐가 중요합니다. 글꼴 다람쥐에서 다운로드 한 파일을 확인하십시오 (글꼴이있는 경우). 포함 된 HTML 데모 파일은 @ 글꼴 얼굴 글꼴을 사용하는 방법을 보여줍니다 일부 CSS를 가지고 : 당신은 인용 부호를 누락

p.style1 {font: 18px/27px 'ColaborateThinRegular', Arial, sans-serif;} 

를, 그래서 CSS는 새 글꼴 이름을 등록 할 수 없습니다. 또한 html로 설정하고 나중에 다른 글꼴 이름을 사용하면 html 설정이 바뀝니다. 중요한 유일한 이름은 @ font-face 이름을 지정하는 방법입니다. 'smashed-font'라고 지정할 수 있으며 'smashed-font'로 참조하면 'smashed-font'로 지정한 파일을 참조합니다. '콜틴'은 괜찮을거야.

필자가 볼 수 있듯이 글꼴 파일을 올바른 위치에 복사했지만 사용 방법은 적절하지 않습니다.

Paul Hayes 3d 실험을 잘 사용했습니다. http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/

여러 종류의 브라우저에서 제대로 작동하지 않을 수 있으므로, 운이 좋지 않아서 웹킷 브라우저를 사용할 수 없거나 -moz 및 -o 및 이러한 변환이 css3 사양으로 만드는 경우를 대비하여 -webkit을 포함하지 않는 css 버전입니다.

위급 한 경우 학습 경험으로 간주하십시오. 이러한 실수를 자신의 작업을 통해 연마하면 잠재 고객에게 훨씬 더 가치있는 서비스가 제공됩니다.