유용한 웹 타이포그래피 도구, 라이브러리 및 프레임 워크 15
웹상의 타이포그래피를 다루는 것은 정말 기발한 일이었습니다.. 각 브라우저에는 글꼴을 렌더링하는 자체 알고리즘이 있습니다. 예상치 못한 불일치가 발생할 수 있습니다. 폰트 커닝 (font kerning), 폰트 스무딩 (font smoothing), 드롭 캡스 (DropCaps) 작성과 같은 폰트에 대한 제어권을 갖기 위해 사용할 수있는 몇 가지 CSS 프로퍼티가 있습니다. 그 외에 폰트와 관련하여 많은 레이아웃 문제를 다루어야합니다.
좋은 소식은 웹 사이트 활판 인쇄와 관련하여 휠을 넘기는 데 사용할 수있는 리소스가 있다는 것입니다. 여기있다. 15 개의 웹 도구, 라이브러리 및 프레임 워크 당신은 그 목적을 위해 사용할 수 있습니다..
Hongkiat에 대한 추가 정보 :
- 9 개의 WordPress 플러그인은 글꼴을 더 많이 사용합니다.
- 뛰어난 가독성을 위해 20 가지 WordPress 타이포그래피 플러그인
- 웹 글꼴을 사용하여보다 선명하고 세련된 UI 아이콘
유형 렌더링
간단히 말해서, 유형 렌더링 모질라 (Modernizr)와 비슷하지만 브라우저 엔진만으로 폰트 렌더링이 가능하다는 점만 다릅니다. 이 라이브러리는 발견을 기반으로 사용자 정의 클래스를 추가하여 유형 렌더링에 특정 스타일 규칙을 적용하는 데 사용할 수 있습니다..
커닝 JS
커닝은 아직 웹에서 사용할 수 있도록 사용자 정의 할 수 없습니다. - 글꼴 커닝 지원은 그 순간에 여전히 가난합니다. 그러나 새로운 표준 속성이 나아갈 것입니다.. 커닝 JS 더 나은 커닝 컨트롤을위한 몇 가지 새로운 속성을 제공하는 Javascript 라이브러리입니다 (예 : -편지 - 컨.
#heading -letter-kern : 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
위의 예는 비표준이며 KerningJS에만 적용 가능합니다..
DropcapJS
dropcap을 만드는 것은 현재의 CSS 표준으로 수행 할 수 있지만 결과는 아직 완벽하지 않습니다. 때로는 바람직하지 않은 경우도 있습니다. Adobe Web Platform에서 개발 한 DropcapJS는 웹 디자이너가 완벽한 dropcap을 쉽게 적용 할 수 있도록 임무를 부여받습니다..
라이닝
라이닝 자바 스크립트 라이브러리입니다. 선 귀하의 단락의 각 줄에 클래스. 이렇게하면 선을 개별적으로 스타일링 할 수 있습니다. 그것은 :: nth-line (), :: nth-last-line () 과 :: 마지막 줄 CSS에 아직 존재하지 않는 의사 클래스. 다음은 LiningJS를 사용하여 단락의 첫 번째 줄 스타일을 지정하는 예제입니다.
p. 선 [first] font-weight : 600; 텍스트 변환 : 대문자;
또한 LiningJS는 중국어 단락 흐름도 지원합니다..
UnderlineJS
UnderlineJS 텍스트 밑줄을 더 잘 나타내주는 JavaScript 라이브러리입니다. 데모를보고 무슨 뜻인지 알아보고 선 위로 마우스를 가져 가십시오. 데모와 현재 CSS의 밑줄 출력 비교 텍스트 장식 표준을 사용하면 underlineJS의 팬이 될 수도 있습니다..
흐름 유형
이 플러그인은 특정 래퍼 너비에 따라 글꼴 크기를 동적으로 조정합니다.. 흐름 유형 모든 화면 너비에서 한 줄당 이상적인 문자 수를 적용 할 수 있습니다. 라이브러리에는 최소 / 최대 화면 너비, 최소 / 최대 글꼴 크기 및 글꼴 비율을 설정할 수있는 옵션이 제공됩니다.
해치 쇼
해치 쇼 컨테이너의 전체 너비를 채우기 위해 글꼴의 크기를 확장합니다. 플러그인은 알고리즘을 사용하여 즉시 사용할 수 있습니다. 요컨대, 컨테이너의 너비 및 글꼴 문자의 길이를 측정하고 적절한 글꼴 크기를 추가합니다.
GridLover
GridLover 쉬운 슬라이더 UI로 타이포그래피 배열 (크기, 선 높이 및 여백)을위한 기본 스타일을 생성하는 훌륭한 도구입니다. SCSS, LESS 및 Stylus로 스타일을 생성하므로 사용하는 CSS 프리 프로세서와 상관없이 프로젝트에 바로 포함 할 수 있습니다.
TypeScale
TypeScale 귀하의 웹 사이트에 맞는 글꼴 크기를 쉽게 결정할 수있는 온라인 도구입니다. 이 도구는 사용하기 쉬운 기본 글꼴 크기, 눈금 및 글꼴 모음을 삽입하기위한 간단한 직관적 인 GUI를 제공합니다. 결과가 시각화되어 규모와 함께 놀고 올바른 가치를 얻을 수 있습니다. 완료되면 CSS를 잡아라..
모듈러 스케일
모듈러 스케일 본문 및 제목 텍스트에 이상적인 글꼴 크기 조정을 생성하는 도구입니다. 그것은 Sass 라이브러리와 함께 사용해야하는 Sass에서 출력됩니다. 또는 JavaScript를 사용할 수도 있습니다. .
글꼴 - 너비
글꼴 - 폭 (FTW) 글꼴을 너비 컨테이너에 맞추는 Javascript 라이브러리입니다. 글꼴에 필요한 단어 간격과 함께 글꼴 크기를 결정합니다. 당신은 꽤 헤드 라인을 만들고 싶다면, 시도해 볼 수있는 라이브러리입니다..
FFFFallback
FFFFallback, 우아하게 저하되는 최상의 글꼴 스택을 찾을 수있는 편리한 도구입니다. 이 도구는 북마크 릿 형식으로 제공되며, 페이지의 글꼴 모음을 분석하고 대체 글꼴로 사용할 글꼴 모음을 제안합니다..
글꼴 쌍
Google 글꼴은 수백만 명이 사용하는 가장 널리 사용되는 웹 글꼴 라이브러리 중 하나이며 500 개 이상의 글꼴 그룹을 호스팅합니다.. 글꼴 쌍 는 글꼴 모음과 문자 유형 간의 다양한 조합을 쉽게 찾을 수있는 페어링 된 Google 글꼴 모음입니다. 폰트 페어는 폰 페어링을 조금 덜 압도적으로 선택하게합니다..
TypeSettings
TypeSettings 적절한 글꼴 크기 조정, 수직 리듬 및 활판 인쇄의 반응 비율을 정의하기 위해 설정된 CSS 규칙 집합입니다. TypeSettings에는 Sass와 Stylus가 포함되어있어 변수를 조정하여 프로젝트 요구 사항을 유연하게 충족 할 수 있습니다..
유형 판
유형 판 아마 타이포그래피를 설정하기위한 가장 완벽한 스타터 키트 중 하나 일 것입니다. Typeplate는 스케일링, 색상, 작은 자본, dropcap, 들여 쓰기, 하이픈 넣기, 블록 쿼트, 코드 블록 및 훨씬 더 많은 것들을 다루는 기본적인 타이포그래피 스타일을 제공합니다.
Now Read : 아름다운 타이포그래피로 웹 디자인 쇼케이스
