CSS 글꼴
3322 단어 codenewbiecsswebdevbeginners
Font Face는 CSS의 훌륭한 기능입니다. 사용하고 싶은 글꼴이 마음에 든다고 생각하세요. 다음은 무엇인가요? 네, 그래서 Fontface입니다.
글꼴은 CSS로 작성되었습니다. 그리고 다음과 같이 작성해야 합니다.
@font-face
{
font-family: FontFace;
src: url('MyFavoriteFont.ttf')
,url('MyFavoriteFont.eot'); /* For IE */
}
글꼴 패밀리: FontFace; 이것을 사용하여 글꼴 모음의 이름을 지정할 수 있습니다. FontFace 대신 아무 이름이나 지정할 수 있습니다. 그리고 나중에 Family가 사용하는 방식으로 CSS 글꼴을 사용할 수 있습니다. font-family: FontFace;
src: url('MyFavoriteFont.ttf')을 사용하여 글꼴의 URL을 추가합니다. IE는 ttf [True Type Font]를 지원하지 않습니다. 이를 위해서는 eot(Embedded OpenType) 글꼴을 사용해야 합니다. 이를 위해 쉼표가 있는 eot 글꼴의 utl을 추가했습니다. eot 글꼴이 없으면 Google에서 조금만 검색하면 얻을 수 있습니다.
글꼴이 준비되었습니다. 이제 어디서나 사용할 수 있습니다. 네가 원하는만큼.
사용하려면 글꼴 패밀리를 작성하면서 작성해야 합니다.
.myDiv
{
font-family:FontFace;
}
그리고 전체 예:
<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
font-family: FontFace;
src: url('MyFavoriteFont.ttf')
,url('MyFavoriteFont.eot'); /* For IE */
}
.myDiv
{
font-family:FontFace;
}
</style>
</head>
<body>
<div class="myDiv">
Some text with CSS3 Font Face feature.
</div>
</body>
</html>
'MyFavoriteFont.ttf' 자리에 글꼴 이름을 입력합니다. 참고: 글꼴을 업로드할 URL을 입력해야 합니다. 이제 글꼴이 있는 디렉토리를 열고 그 안에 글꼴을 넣으면 'fonts/MyFavoriteFont.ttf' 등을 입력해야 합니다.
너무 귀찮게 하고 싶지 않다면 더 간단한 방법으로 사용할 수 있습니다. Google Web Fonts에는 많은 글꼴이 업로드되어 있습니다. http://www.google.com/fonts/
여기로 이동하여 원하는 글꼴을 선택하고 빠른 사용 버튼을 클릭하여 사용할 수 있습니다. 사이트의 헤더 섹션에 다음 링크를 추가합니다.
<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>
더 이상 할 일이 없습니다. 그런 다음 글꼴 이름을 fontfamily에 추가하기만 하면 됩니다. font-family: 'Caesar Dressing', cursive;
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Sonsie+One' rel='stylesheet' type='text/css'>
<style>
.myDiv
{
font-family: 'Sonsie One', cursive;
text-align:center;
margin-top:10%;
color:#808080;
}
</style>
</head>
<body>
<div class="myDiv">
Some text with CSS3 Font Face feature.
</div>
</body>
</html>
다음을 읽을 수도 있습니다.
프로그래밍 및 코딩에 대한 더 흥미로운 팁과 트릭을 보려면 others articles
Instagram에서 내 페이지 찾기:
트위터에서 나를 찾아주세요:
Reference
이 문제에 관하여(CSS 글꼴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mrezaulkarim/css-font-face-2i7l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
