귀하의 웹 사이트를위한 25 멋진 웹 안전 글꼴

  • 온라인 사업
  • 업데이트 : Jan 17, 2019

네가 전자 상거래 상점 or 싹 트는 블로거, 모든 웹 사이트가 공통적으로 가지고있는 한가지는 텍스트를 텍스트로 사용하는 것입니다. 표시된 텍스트 (또는 활자체 디자인)에 대해 생각해보십시오. 놀랍지 않게 사이트의 전체적인 미학을 창출하고 성공을 보장 할 때 중요합니다.

여기에 멋진 WordPress 템플릿이 있거나 웹 사이트에 인상적인 이미지를 넣을 수 있습니다. 그러나 기본 글꼴을 사용하지 않는 경우 (또는 더 나쁜 Comic Sans!), 모양과 느낌이 비슷한 웹 사이트로 끝납니다 비전문가.

또한 온라인에서 볼 수있는 화려한 웹 활판 인쇄에 대해 빠져 있습니다.

물론, 선택한 글꼴이 다른 컴퓨터에서 안정적으로로드되는지 확인하려면 "웹 안전 글꼴"을 선택해야합니다.

25의 멋진 웹 안전 글꼴을 사용하면이 기사의 끝까지 항상 작동하는 웹 사이트에 놀라운 웹 활자체를 사용할 수 있습니다!

웹 안전 글꼴이란 무엇입니까?

웹 안전 글꼴은 일반적으로 컴퓨터, 휴대 전화, 스마트 TV 및 태블릿과 같은 대부분의 장치에 사전 설치되어있는 글꼴입니다.

웹 안전 글꼴이 중요한 이유는 무엇입니까?

이상적인 세계에서, 당신은 귀하의 웹 사이트에 대해 원하는 글꼴을 선택할 수 있어야합니다. 실제로는 사용할 수있는 글꼴 유형에 제한이 있습니다.

대부분의 컴퓨터와 웹 브라우저에는 제조업체가 사전 설치 한 글꼴 세트가 제공되지만 디자인은 다를 수 있습니다. 모든 다른 제조업체가 공유하는 표준 글꼴 집합이 없습니다.

사용한 글꼴이 사용자의 컴퓨터에 설치되어 있지 않으면 웹 사이트가 일반 글꼴로 되돌아 가며 읽을 수없는 글꼴로 바뀔 수 있습니다.

이를 피하기 위해 웹 디자이너는 웹용 핵심 글꼴 마이크로 소프트가 대부분의 웹 사이트 글꼴의 표준으로 1996에서 발표했다. 이러한 글꼴 세트는 결국 컴퓨터에 관계없이 글꼴이 웹 사이트에 안전하게 나타나기 때문에 결국 "웹 안전 글꼴"이되었습니다.

내 웹 사이트에서 웹 안전 글꼴을 사용해야합니까?

짧은 대답 : 물론입니다.

웹 사이트의 디자인과 시각적 브랜드를 일관되게 유지하려는 경우 웹 안전 글꼴을 사용하면 웹 사이트가 의도 한대로 정확하게 나타납니다.

사실, 거의 모든 웹 사이트는 오늘날 웹 보안 글꼴의 일부 형식을 사용하고 있습니다. 웹 디자이너는 Times New Roman과 같은 일반 글꼴이 사용자가 특정 글꼴이나 사용자 지정 글꼴을 사용하지 않으면 웹 사이트를 방문 할 때 나타나지 않도록 웹 안전 글꼴을 선택하는 것이 좋습니다.

이 웹 안전 글꼴을 어떻게 추가합니까?

이러한 글꼴을 웹 페이지에 추가하는 데 사용할 수있는 여러 가지 방법이 있지만 프로그래밍에 익숙하지 않거나 기술적 인 경험이 거의없는 경우 원시 CSS 코드를 복사하여 직접 붙여 넣을 수 있습니다 자신의 스타일 시트에 글꼴을 사용합니다.

여전히 확실하지 않은 경우 다음 몇 가지 간단한 단계를 따르십시오.

  1. header.php 파일로드
  2. 글꼴 소스 / 표준 코드 복사
  3. 코드를 헤더 파일의 맨 위에 붙여 넣습니다.
  4. style.css를로드하고 글꼴 코드를 넣어 선택한 글꼴 텍스트를 변경합니다.

마지막으로 다음과 같은 스타일 시트가 있어야합니다.

귀하의 웹 사이트를위한 25 멋진 웹 안전 글꼴

1. Arial

링크 / 출처 : Fonts.com / CSS 글꼴 스택

2. 칼리 브리

링크 / 출처 : Fonts.com / CSS 글꼴 스택

3. 헬 베티 카

링크 / 출처 : Fonts.com / CSS 글꼴 스택

4. Segoe UI

링크 / 출처 : Fonts.com / CSS 글꼴 스택

5. Trebuchet MS

링크 / 출처 : Fonts.com / CSS 글꼴 스택

6. 웨일스의 별칭

링크 / 출처 : Fonts.com / CSS 글꼴 스택

7. 팔라티노

링크 / 출처 : Fonts.com / CSS 글꼴 스택

8. 퍼 페투 아

링크 / 출처 : Fonts.com / CSS 글꼴 스택

9. 그루지야

링크 / 출처 : Fonts.com / CSS 글꼴 스택

10. Consolas

링크 / 출처 : Fonts.com / CSS 글꼴 스택

11. 택배 신규

링크 / 출처 : Fonts.com / CSS 글꼴 스택

12. Tahoma

링크 / 출처 : Fonts.com / CSS 글꼴 스택

13. Verdana

링크 / 출처 : Fonts.com / CSS 글꼴 스택

14. 옵티마

링크 / 출처 : Fonts.com / CSS 글꼴 스택

15. 길 샌

링크 / 출처 : Fonts.com / CSS 글꼴 스택

16. 세기 고딕

링크 / 출처 : Fonts.com / CSS 글꼴 스택

17. 칸다 라

링크 / 출처 : Fonts.com / CSS 글꼴 스택

18. 안달일 모노

링크 / 출처 : Fonts.com / CSS 글꼴 스택

19. 디딤

링크 / 출처 : Fonts.com / CSS 글꼴 스택

20. 구리 플레이트 고딕

링크 / 출처 : Fonts.com / CSS 글꼴 스택

21. 로크웰

링크 / 출처 : Fonts.com / CSS 글꼴 스택

22. 보도 니

링크 / 출처 : Fonts.com / CSS 글꼴 스택

23. 프랭클린 고딕

링크 / 출처 : Fonts.com / CSS 글꼴 스택

24. 충격

링크 / 출처 : Fonts.com / CSS 글꼴 스택

25. 칼리스토 몬태나

링크 / 출처 : Fonts.com / CSS 글꼴 스택

체크 아웃 할 글꼴 도구

웹 사이트에 사용할 수있는 다른 글꼴을 확인하고 테스트하는 데 사용할 수있는 여러 가지 도구가 온라인에 있습니다. 글꼴을 선택하는 데 문제가 있거나 사용 가능한 웹 안전 글꼴 유형을 탐색하려는 경우이 사이트는 사용할 수있는 훌륭한 도구입니다.

글꼴 쌍

글꼴 쌍 는 많은 자원, 플러그인, eBook, 가이드, 비디오 및 심지어 활판 인쇄와 관련된 모든 것에 대한 영감을 제공합니다. 심지어 Google 글꼴에서 가장 많이 사용되는 글꼴을 제공하고 어떤 글꼴이 서로 가장 잘 어울리는 섹션을 제공합니다.

Wordmark.it

특정 글꼴로 텍스트가 어떻게 보이는지 미리 볼 수있는 빠른 미리보기를 원한다면, Wordmark.it 한 번에 여러 글꼴에 텍스트가 어떻게 나타나는지 즉각적인 미리보기를 제공합니다. 첫 페이지 표시 줄에 단어 나 구를 입력하고 Enter 키를 누르면 Candara 나 Lucida Console과 같은 다른 글꼴로 된 텍스트가 표시됩니다.

WhatTheFont

WhatTheFont 는 온라인에서 본 글꼴을 식별하고 식별하는 데 사용할 수있는 도구입니다. 글꼴의 이미지를 업로드하기 만하면 WhatTheFont가 데이터베이스에서 교차 검색하여 가장 가까운 결과를 얻을 수 있습니다. 그래도 정확한 글꼴을 찾을 수 없으면 해당 글꼴로 이동할 수 있습니다. 도움을 청하기위한 포럼.

폰트 플레이에 관한 모든 것

당신이 나를 좋아한다면, 당신은 웹에서 많은 시간을 보내고 독서를하고 웹 사이트를 방문하는 것입니다. 그 때문에 웹 사이트가 사이트의 시각적 디자인을 보완하기 위해 좋은 인쇄술을 사용하는 경우 감사하게 생각합니다.

눈을 즐겁게하는 웹 안전 글꼴을 사용하면 사용자가 돌아와서 더 많은 콘텐츠를 소비하게되어 기꺼이 감사하게 생각합니다. 그래서 뭘 기다리고 있니? 이 글꼴을 사용하여 시작하고 멋진 웹 사이트 만들기 귀하의 비즈니스를 위해!

Azreen Azmi의 기사

Azreen Azmi는 콘텐츠 마케팅 및 기술에 대한 글쓰기가있는 작가입니다. YouTube에서 Twitch에 이르기까지 그는 최신 콘텐츠 제작과 관련하여 브랜드를 홍보 할 수있는 가장 좋은 방법을 찾으려고합니다.