├── README.md
├── zero-width.css
├── zero-width.eot
├── zero-width.otf
├── zero-width.svg
├── zero-width.ttf
└── zero-width.woff
/README.md:
--------------------------------------------------------------------------------
1 | Zero-width Web Font
2 | =========
3 |
4 | Zero-width web fonts allow us to clear the whitespace between inline-block elements without having to declare `font-size: 0;` on the parent element.
5 |
6 | ### Background
7 |
8 | Various IE versions do not like `font-size: 0;` so `font-size: 0.1px;` is often suggested as an alternative. However, FireFox does not like `font-size: 0.1px` and rounds it up, negating its use. Using a "zero-width" font on our element provides us with whitespace clearing accross all font-face compatible browsers.
9 |
10 | ### Repo Contents
11 |
12 | This repo contains a full set of @font-face ready web fonts, originally ported from Adobe's "Adobe Blank" font which was engineered for this purpose. I have also included an example CSS file that can be included in your project (NB: the files' `src` paths must be set according to your project's file structure).
13 |
14 | ### Use
15 |
16 | Once the files and CSS have been correctly included in your project, you may apply the font to whichever element you which to clear whitespace on. This is typically the parent element that contains inline-block elements:
17 |
18 | ```html
19 |
20 |
21 |
22 |
23 | ...
24 |
25 | ```
26 |
27 | ```css
28 | .grid {
29 | font-family: 'zero-width';
30 | }
31 |
32 | .grid .item {
33 | font-family: 'helvetica';
34 | }
35 |
36 | /* NB: You will need to override on child items, as 'font-family' is a cascading property */
37 | ```
38 |
39 | ### Avoiding loading flicker
40 |
41 | Because @font-face files may take a moment to load, often after the page has rendered, we can use the zero-width font in conjunction with `font-size: 0;` to create bullet proof whitespace clearing with elegant loading.
42 |
43 | ```css
44 | .grid {
45 | font-family: 'zero-width';
46 | font-size: 0;
47 | }
48 |
49 | .grid .item {
50 | font-family: 'helvetica';
51 | font-size: 1rem;
52 | }
53 | ```
54 |
55 | ### Further Reading
56 |
57 | - [http://blog.typekit.com/2013/03/28/introducing-adobe-blank/](http://blog.typekit.com/2013/03/28/introducing-adobe-blank/)
58 | - [http://css-tricks.com/fighting-the-space-between-inline-block-elements/](http://css-tricks.com/fighting-the-space-between-inline-block-elements/)
59 | - [http://davidwalsh.name/remove-whitespace-inline-block](http://davidwalsh.name/remove-whitespace-inline-block)
60 |
61 | ### CDN
62 |
63 | This font is now kindly available via [http://www.jsdelivr.com/](jsDelivr)'s CDN.
64 |
65 | You may reference the following 5 source files in your own CSS, using the @font-face syntax of your choice.
66 |
67 | ```
68 | //cdn.jsdelivr.net/font-zero-width/latest/zero-width.eot
69 | //cdn.jsdelivr.net/font-zero-width/latest/zero-width.otf
70 | //cdn.jsdelivr.net/font-zero-width/latest/zero-width.svg
71 | //cdn.jsdelivr.net/font-zero-width/latest/zero-width.ttf
72 | //cdn.jsdelivr.net/font-zero-width/latest/zero-width.woff
73 | ```
74 |
75 | Alternatively, you can @import the ready-made CSS file:
76 |
77 | ```css
78 | @import url('//cdn.jsdelivr.net/font-zero-width/latest/zero-width.css');
79 | ```
80 |
--------------------------------------------------------------------------------
/zero-width.css:
--------------------------------------------------------------------------------
1 | @font-face{
2 | font-family: 'zero-width';
3 | src: url('..path-to-fonts/zero-width.eot');
4 | font-weight: normal;
5 | font-style: normal;
6 | }
7 |
8 | @font-face{
9 | font-family: 'zero-width';
10 | src: url('//:') format("No-IE-404"),
11 | url('..path-to-fonts/zero-width.woff') format('woff'),
12 | url('..path-to-fonts/zero-width.svg') format('svg'),
13 | url('..path-to-fonts/zero-width.otf') format('opentype'),
14 | url('..path-to-fonts/zero-width.ttf') format('truetype');
15 | font-weight: normal;
16 | font-style: normal;
17 | }
--------------------------------------------------------------------------------
/zero-width.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/patrickkunka/zero-width/b769a725997a3b45d38814db8fc8b41884d53b34/zero-width.eot
--------------------------------------------------------------------------------
/zero-width.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/patrickkunka/zero-width/b769a725997a3b45d38814db8fc8b41884d53b34/zero-width.otf
--------------------------------------------------------------------------------
/zero-width.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/zero-width.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/patrickkunka/zero-width/b769a725997a3b45d38814db8fc8b41884d53b34/zero-width.ttf
--------------------------------------------------------------------------------
/zero-width.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/patrickkunka/zero-width/b769a725997a3b45d38814db8fc8b41884d53b34/zero-width.woff
--------------------------------------------------------------------------------