CSSans.Pro 다운로드 CSSans.Pro 소스 코드 다운로드

CSSans.Pro

글꼴 다운로드

1.0.0

다운로드

CSSANS PRO- 화려하고, 엉뚱한, CSS 글꼴

CSSANS Pro 는 Andronache Izabela 및 Codrin Pavel의 CSS 프로젝트입니다.

개요 - 모든 문자 및 CSS 클래스
빠른 시작 - 몇 초 만에 CSSANS PRO GET 및 RUNGING
Quick Start -JavaScript 버전 - JS가 글을 쓰도록하자
옵션
- 그림 물감
- 편지 스페이스
- 단어 간격
- 라인 높이
- 이탤릭체 (경사 텍스트)
- 정렬 : 센터
- 정렬 : 맞습니다
브라우저 지원 - CSS 변수없이 사용하는 방법
접근성 - 슈퍼, 매우 중요합니다
설치 -이 저장소를 로컬로 실행하는 지침

개요

대문자

a -z

소문자

a -z

숫자

0-9

기호

! ~,.*()?@:; '-+=/& $#_

탈출 된 상징

` 
^ 
% 
[ 
] 
{ 
} 
" 
<< 
> 

|

빠른 시작

Repo에서 미니스트 CSS 파일을 가져옵니다.

/dist/cssans.min.css

일부 예제 HTML 마크 업을 추가하십시오.

 < div class =" cssans cssans--center " >
    < div class =" cssans__accessible " > CSSans Pro </ div >

    < div class =" cssans__word " >
        < b class =" cssans:C " > </ b >
        < b class =" cssans:S " > </ b >
        < b class =" cssans:S " > </ b >
        < b class =" cssans:a " > </ b >
        < b class =" cssans:n " > </ b >
        < b class =" cssans:s " > </ b >
    </ div >

    < div class =" cssans__word " >
        < b class =" cssans:P " > </ b >
        < b class =" cssans:r " > </ b >
        < b class =" cssans:o " > </ b >
    </ div >
</ div >

... 이익!

다음은 빠른 분석입니다.

각 캐릭터는 CSSAN 클래스의 클래스가있는 단일 요소 입니다 cssans:CHAR
각 개별 단어는 .cssans__word 컨테이너 안에 들어갑니다. 이것은 모든 텍스트가 제대로 간격을두고 있는지 확인합니다.
접근성을 향상 시키려면 .cssans__accessible 컨테이너에 원본 텍스트를 추가해야합니다. 확실히 이것을 읽으십시오
CSSANS Pro는 일부 옵션과 .cssans--center 와 같은 내장 헬퍼 클래스를 제공합니다. 더 많은 옵션을 참조하십시오

빠른 시작 - JavaScript 버전

Repo에서 미니스트 CSS 및 JS 파일을 가져옵니다.

/dist/cssans.min.css
/dist/cssans.min.js

일부 예제 HTML 마크 업을 추가하십시오.

 < div id =" foo " > CSSans Pro </ div >

전화 CSSans(element, text)

 var element = document . getElementById ( 'foo' ) ;
var text = element . innerText ;
CSSans ( element , text ) ;

/_src/cssans/js/cssans.js 에서 미확인 CSSANS () 함수를 잡아서 무슨 일이 일어나고 있는지 확인할 수 있습니다. 아무것도, 실제로 자신의 것을 자유롭게 만들지 않습니다.

옵션

그림 물감

컬러 팔레트는 --cssans-**WHICHCOLOR**: **R**, **G**, **B** 로 작성된 5 개의 CSS 변수로 제어됩니다.

이 표기법은 rgb() 구문없이 색상 값 만 사용합니다.

 --cssans-primary : 31 , 51 , 104 ;    // blue
--cssans-secondary : 237 , 21 , 118 ; // pink
--cssans-accent1 : 43 , 208 , 247 ;   // light blue
--cssans-accent2 : 255 , 92 , 92 ;    // orange
--cssans-accent3 : 255 , 216 , 9 ;    // yellow

편지 스페이스

 --cssans-letter-spacing : 0.1 em ;

단어 간격

 --cssans-word-spacing : 1 em ;

라인 높이

 --cssans-line-height : 1.1 em ;

정렬 : 센터

글꼴 마크 업을 보유하는 컨테이너에서 cssans--center 사용하십시오.

이 클래스는 모든 단어가 부모 컨테이너 중간에 올바르게 정렬되도록합니다.

단순히 text-align:center; 단어가 마진으로 분리되어 있기 때문에 그다지 그렇지 않습니다.

 < div class =" cssans--center " >
    < div class =" cssans__word " > ... </ div >
</ div >

정렬 : 맞습니다

글꼴 마크 업을 보유하는 컨테이너에서 cssans--right 클래스)를 사용하십시오.

이 클래스를 사용하면 텍스트를 모 컨테이너의 오른쪽에 올바르게 정렬하는 데 도움이됩니다.

 < div class =" cssans--right " >
    < div class =" cssans__word " > ... </ div >
</ div >

이탤릭체 (경사)

글꼴 마크 업을 보유하는 컨테이너에있는 cssans--slanted 클래스를 사용하여 글꼴에 이탤릭체 로 표시됩니다.

참고 :이 클래스는 문자 그대로 transform: skew(-15deg); 각 .cssans__word 에. 실험 해 주시겠습니까?

 < div class =" cssans--slanted " >
    < div class =" cssans__word " > ... </ div >
</ div >

브라우저 지원

CSSANS Pro는 CSS 사용자 정의 속성을 지원하지 않는 이전 브라우저에서 작동 할 수 있습니다. 다음은 몇 가지 방법이 있습니다. 가장 적합한 것을 선택하십시오.

cssans pro /dist/cssans.min.ie.css 의 미리 건축 된 IE 호환 버전 사용 -이 파일에는 CSS 변수가 포함되어 있지 않으며 모든 코드는 일반 CSS 속성과 사전 컴파일됩니다. 사용자 정의하려는 모든 색상과 간격을 자유롭게 찾거나 교체하십시오.
로컬로 리포지기를 설치하고 자신만의 버전의 cssans.min.ie.css 또는 ...
CSS-VARS-PONYFILL과 같은 폴리 필드를 사용하십시오

접근성

CSSans() JavaScript 함수를 사용하는 경우이 내용을 읽을 필요가 없습니다.

CSSANS Pro는 스크린 리더 및 기타 보조 기술이 식별 할 수없는 CSS 모양으로 만들어졌습니다.

사이트에 액세스 가능성을 유지하려면 내장 된 .cssans__accessible 클래스를 사용 하십시오 . 정말 쉬워요.

 < div class =" cssans__accessible " > I can be read by a screen reader, hurray! </ div >

설치

작동하는 Jekyll 환경과 NPM 이 컴퓨터에 설치해야합니다. NPM을 설치 한 후에는 npm install -g gulp 사용하지 않은 경우 gulp 글로벌 루트 디렉토리에 설치해야합니다. 진행하기 전에 이것들이 시스템에서 작동하는지 확인하십시오.
레포를 복제하십시오
npm install 로 종속성을 설치하십시오
gulp 실행하십시오

이 시점에서 BrowserSync는 http://localhost:3000 에서 새 브라우저 탭을 열어야합니다.

이 저장소에는 CSSANS Pro 용 모든 파일과 프레젠테이션 사이트가 포함되어 있습니다.

_src/cssans/sass/ 에서 글꼴 파일을 찾을 수 있습니다. 모든 CSS 사용자 정의 속성은 _common.scss 로 설정됩니다.

dist 디렉토리는 파일을 업데이트 할 때 Fly를 업데이트해야하므로 편집을 마치 자마자 _dist 폴더에서 미니언 된 파일을 가져올 수 있습니다.

재미있게 보내세요!

확장하다

추가 정보