normalize-opentype.css - GitLite

KO | EN

gitlite — search

#javascript #ai #typescript #llm #android #machine-learning #rust #deep-learning #docker #java #awesome-list #pytorch #ios #openai

normalize-opentype.css

(★ 786)

Adds OpenType features—ligatures, kerning, and more—to Normalize.css.

파일 탐색기

최종 버전 다운로드 (.zip)

- download.png
- download.svg
- example-1.png
- example-2.png
- example-3.png
- example-4.png
- example-5.png
- wordmark.png
- wordmark.svg
- index.html
.gitignore
.npmignore
bower.json
component.json
CONTRIBUTING.md
LICENSE.md
normalize-opentype.css
normalize-opentype.scss
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/kennethormandy/normalize-opentype.css

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd normalize-opentype.css

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install normalize-opentype.css

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm test

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm build

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

**Note** You might also like my more recent take on this project, [Utility OpenType](https://github.com/kennethormandy/utility-opentype): CSS utility classes for advanced typographic features.

***

[![Normalize-OpenType.css wordmark](https://raw.githubusercontent.com/kennethormandy/normalize-opentype.css/master/assets/wordmark.png)](http://kennethormandy.com/journal/normalize-opentype-css)

***

# Normalize-OpenType.css

Adds OpenType features—ligatures, kerning, and more—to [Normalize.css](https://github.com/necolas/normalize.css).

Read the blog post: [Introducing Normalize-OpenType.css](http://kennethormandy.com/journal/normalize-opentype-css)

[<img alt="Get the latest version of the CSS file" src="assets/download.png" width="150px" />](https://raw.githubusercontent.com/kennethormandy/normalize-opentype.css/master/normalize-opentype.css)

_Or use_

```bash
npm install normalize-opentype.css
```

## Ligatures

First, normalize basic ligatures across browsers, and then get fancier, discretionary ligatures on `<h1>`, `<h2>`, and `<h3>`s.

![An example of basic and discretionary ligatures.](https://raw.githubusercontent.com/kennethormandy/normalize-opentype.css/master/assets/example-1.png)

## Numerals

Different situations require different numerals, depending on the context. Normalize-OpenType.css takes care of this for you, so you don’t need to know what combination of Proportional, Lining, Tabular, and Old-Style numerals you need to use.

![An example of old-style, proportional numerals.](https://raw.githubusercontent.com/kennethormandy/normalize-opentype.css/master/assets/example-2.png)

![An example of tabular, lining numerals.](https://raw.githubusercontent.com/kennethormandy/normalize-opentype.css/master/assets/example-3.png)

## Small Capitals

Regular capitals draw a lot of attention in body copy. With Normalize-OpenType.css, anything wrapped in `<abbr>` will use small capitals instead. This works especially well with [Typogr.js](https://github.com/ekalinin/typogr.js) and equivalents.

![An example of small capitals.](https://raw.githubusercontent.com/kennethormandy/normalize-opentype.css/master/assets/example-4.png)

## Kerning

Kerning is turned on by default everywhere, and carefully turned off where it isn’t appropriate. A monospaced typeface’s application is ruined when automatic kerning is turned on. This is not the case with Normalize-OpenType.css; your code blocks have been preserved.

![A kerning example.](https://raw.githubusercontent.com/kennethormandy/normalize-opentype.css/master/assets/example-5.png)

## …and more

There’s more optimisations included, so you don’t have to think about them: Lining, tabular numerals in code blocks, uppercase fallbacks for small capitals, and proper subscript and superscripts.

## Getting started

Normalize-OpenType.css aims to be as easy to use as its namesake, Normalize.css. If it’s not that easy, please [open an issue](https://github.com/kennethormandy/normalize-opentype.css/issues). Get the latest version of the CSS file here:

[<img alt="Get the latest version of the CSS file" src="assets/download.png" width="150px" />](https://raw.githubusercontent.com/kennethormandy/normalize-opentype.css/master/normalize-opentype.css)

Alternatively, use the package manager and build tool of your choice:

#### With npm

```
npm install normalize-opentype.css
```

#### With Component

```bash
component install kennethormandy/normalize-opentype.css
```

#### With bower

```bash
bower install normalize-opentype.css
```

### Include

Though technically Normalize-OpenType.css is not dependent on Normalize.css, the intent expectation is that the former would not be used without the latter. If you’re dropping in stylesheets:

```html
<link src="css/normalize.css" rel="stylesheet" />
<link src="css/normalize-opentype.css" rel="stylesheet" />
```

If you’re using a preprocessor through something like [Harp](http://harpjs.com), you can import the files instead.

```scss
@import "normalize";
@import "normalize-opentype";
```

### Caveats

This library does the best it can with what it has. In order to use any of these optimisations, they must also be available in the font you are using.

I’m working on some blog posts and documentation about this, and will be [sending them out via email](http://kennethormandy.com/journal/newsletter) if you’re interested.

There’s also a bug in Open Sans on Windows 7, with IE10 and 11, that’s caused by `font-feature-settings`, which this stylesheet uses heavily. [We’re keeping an eye on it.](https://github.com/kennethormandy/normalize-opentype.css/issues/4)

## Running locally

If you’d like to see the test suite, or just want to view things locally, use the following:

```bash
git clone https://github.com/kennethormandy/normalize-opentype.css
cd normalize-opentype.css
npm install
```
To view the tests:

```bash
npm test
```

To compile any changes:

```bash
npm build
```

## Contributing

Thanks for considering contributing! There’s information about how to [get started with normalize-opentype here](CONTRIBUTING.md).

If you’re new to all this GitHub, Open Source, JavaScript, Node.js, testing, wow all this stuff seems really difficult I just want to make my sites better stuff, I get it. I’m still there, too. Feel free to [send me an email](mailto:kenneth@chloi.io) or [open an issue here](http://github.com/kennethormandy/normalize-opentype.css/issues) and I’ll do my best to share some resources that have helped me out.

## Colophon

Normalize-OpenType.css’ wordmark, examples, and some tests set in the [Klinic Slab](http://www.losttype.com/font_beta/?name=klinic), designed by [Joe Prince](https://dribbble.com/JoePrince). The manicules were designed by [Cade Cran](http://cadecran.com) for [Dan Gneiding](http://grayhood.com/)’s [Dude Hank Pro](http://www.losttype.com/font/?name=hankpro). Both are available through the wonderful [Lost Type Co-op](http://losttype.com).

Additional tests use [Fira](https://github.com/mozilla/Fira) from Mozilla, and [Source Code Pro](https://github.com/adobe/source-code-pro) from Adobe.

## License

[The MIT License (MIT)](LICENSE.md)

Copyright © 2014–2015 [Kenneth Ormandy](http://kennethormandy.com)