font-family에 대한 기사를 읽었지만 어떻게 작동하는지 아직 많이 이해하지 못했습니다. 그래서이 질문을 통해 글꼴 패밀리가 어떻게 작동하는지 더 잘 이해할 수 있기를 바랍니다.웹 페이지에서 font-family를 복사하는 방법
웹 사이트에서 아름다운 글꼴을 볼 수 있는데 그 중 하나의 CSS는 font-family:'Futura Today Bold',Arial,sans-serif입니다. 내 웹 사이트로 복사하려고 시도하지만 작동하지 않습니다. 이 웹 사이트의 영향을받는 요소가 기본 글꼴을 표시하고있는 것 같습니다. 다음은 중요한 질문입니다. 요소에서 실제로 사용하는 글꼴을 확인하려면 어떻게해야합니까? 자바 스크립트로 할 수 있습니까?
그리고 가장 중요한 질문은 내 웹 사이트에이 'Futura Today Bold' 글꼴을 어떻게 사용합니까?
사용하려는 글꼴에 문제가있는 것은 모든 사용자의 기기에이 글꼴이 설치되지 않는다는 것입니다. 이는 사용자가 확인한 웹 사이트에 폴백 글꼴 (Arial)이 지정되어있는 이유입니다.
사용자의 장치에서 사용할 수없는 글꼴을 사용하려면 use web fonts해야합니다.
@font-face {
font-family: 'Futura Today Bold';
src: url('http://path/to/futuratodaybold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('http://path/to/futuratodaybold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
당신의 CSS 코드에서 위의 라인을 포함하면, 글꼴이 스타일 시트의 CSS 규칙 font-family:'Futura Today Bold'으로 적용 할 수 있습니다 여기에 있다고 할 수있는 예제 CSS 코드입니다.
또한 as Christina pointed out in a comment에 유의하십시오. 사용 권한이없는 글꼴은 사용하지 마십시오.
현재 적용중인 글꼴을 찾는 방법에 대한 다른 질문에 답하면 브라우저의 개발자 도구를 사용하여 찾을 수 있습니다. 다음은 Firefox에서 수행 할 수있는 방법에 대한 스크린 샷입니다.
나는 또한 개발자 도구를 사용하여 실제로 사용되는 글꼴을 찾으십시오. 그러나 폰트 패밀리를 '말도 안되는'것으로 설정하면, 계산 된 스타일의 폰트 패밀리도 '말도 안되는'것을 표시 할 것입니다. 아무런 의미가 없습니다 – shenkwen
흠? 그것은 내가 끝까지보고있는 행동이 아닙니다.위의 스크린 샷은 이전 버전이며 이전 버전의 Chrome에 적용 할 수 있습니다. Chrome을 사용하는 경우 devtools를 열고 '요소'탭으로 이동하여 웹 페이지에서 요소를 선택하십시오. 그런 다음 오른쪽 창에서 'Computed'라는 탭으로 이동하여 맨 아래로 스크롤하십시오. 거기에서 렌더링 된 글꼴을 볼 수 있습니다. 이 스크린 샷에서 : http://i.imgur.com/LjMhjDz.jpg 방금 전에'난센스 '글꼴 스타일을 범위에 적용했지만 오른쪽 창 하단에는'Times New 로마 '. –
좋아요, "렌더링 된 글꼴"섹션을 놓쳤습니다.이 정보에 감사드립니다. 정말 도움이됩니다. 하지만이 그림을 보시기 바랍니다 : http://t.whstonecabinet.com/font.png 렌더링 된 글꼴 섹션에서 이상한 것을 표시합니다. 라이브 사이트를 볼 수 있습니다 : http://t.whstonecabinet.com (http://t.whstonecabinet.com) – shenkwen
기본적으로 페이지에로드 할 때 글꼴이 실제로 번들에 포함되도록해야합니다. 당신은 당신이 설정해야 할이 모두 완료 한 후 사용자의 CSS를
@import('font-name');
로 <head>
<link href='font-name' rel='stylesheet' type='text/css' />
또는 다음과 같이이 html 코드를 사용하여 파일을 일단 당신은 쉽게 할 수 있습니다 이것은 당신이 TTF를 일단 폰트 이름을 정의하는 데 필요한 업데이트
전에 같은 글꼴했다. 그런 다음
당신은 어떤 글꼴을 만들고 파일 트리에 보면됩니다이 줄을 볼 수 있습니다 시작 부분에 :이 파일을 보면 CSS
@font-face {
font-family: 'Futura Today Bold';
src: url('font-name.ttf');
}
이 넣어 fonts/Roboto-Regular-webfont.eot에서 당신은 EOT 파일을 찾을 수 있습니다
@font-face {
font-family:'Roboto';
src:url('../fonts/Roboto-Regular-webfont.eot');
src:url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#Roboto') format('svg');
}
그래서 내가 틀에 박힌 글꼴을 사용하는 페이지를 볼 경우 HTML에서 글꼴 파일의 URL을 가져올 수 있어야합니까? 사실 자신의 joomla powered 웹 사이트를보고 있는데 템플릿에는 ' '로보트', 그리고 나는이 ttf 파일을 볼 수있다. 이'robots' 글꼴이'
' – shenkwen에로드되는 것을 보지 못합니다. ttf 파일을 얻은 다음 미안합니다. 위의 내용을 업데이트에서 말한 것입니다. – Hive7
아니요. 어떻게 작동하는지 이해하려고합니다. 내 페이지가 제대로 작동하지만 'roboto'글꼴이 올바르게 표시되지만 이는 틀에 얽매이지 않는 글꼴이지만 언급 한대로이 글꼴이로드되지 않습니다. 그렇다면 왜이 'roboto'글꼴을 내 페이지에 표시 할 수 있습니까? – shenkwen
웹 사이트에서 글꼴을 사용하려고해도 표시되지 않는 경우 많은 경우 글꼴을 사용할 수 없습니다. 그래서 google을 다운로드하십시오 (허용되는 경우). 온라인 웹 사이트에서이 글꼴을 사용하려면 글꼴을 제공해야합니다. 글꼴이 확실하지 않은 경우 모두 글꼴을 지정해야합니다. 제공은 @font-face을 통해 수행 할 수 있습니다. 그러나 저작권을 염두에 두십시오.
브라우저가 페이지를 렌더링 할 때 왼쪽에서 오른쪽으로 글꼴을 사용합니다. 가장 왼쪽을 사용할 수없는 경우 오른쪽으로 한 단계 이동합니다. 오른쪽에 sans 또는 sans-serif과 같은 것을 자주 볼 수 있으며, 브라우저가 그 유형의 기본 글꼴을 선택하는 대체 기능을 제공합니다.
현재 사용중인 글꼴을 보려면 Firefox 또는 Chrome에서 해당 부분을 마우스 오른쪽 버튼으로 클릭하고 요소를 검사 할 수 있습니다. 글꼴 섹션을 찾으십시오. 여기서 어떤 글꼴이 사용되는지 확인할 수 있습니다. 여러 글꼴이 표시되면 가장 왼쪽/맨 위 값이 적용되어야합니다.
실제로 프로젝트에 글꼴 파일이 있어야하거나 CSS에서 @ font-face를 사용하여 파일을 다운로드 할 수 있습니다.
온라인 다운로드 용 글꼴을 제공하는 서비스가 많이 있습니다. 일부는 Google Fonts (무료로 다운로드 할 수 있습니다 다른) (Typekit 지급됩니다.
이 link 그것이 웹 폰트 오늘 얼마나 약간의 설명합니다.
https://typekit.com/fonts/futura- pt - 해당 글꼴을 사용할 수있는 라이센스 나 오픈 소스 글꼴 등이 없으면 웹 페이지에서 바탕 화면 글꼴을 사용할 수 없습니다. – Christina
이 글꼴을 어디에서 찾을 수 있습니까? 어떤 웹 사이트 – Hive7
usatoday.com 사이드 바 제목이 "가장 인기있는 " – shenkwen