Skip to content

Instantly share code, notes, and snippets.

@kosei27
Last active August 29, 2015 14:14
Show Gist options
  • Save kosei27/a099389d9a57b18ab7c4 to your computer and use it in GitHub Desktop.
Save kosei27/a099389d9a57b18ab7c4 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h1>font weight check <span class="note">on Mac OS X 10.10</span></h1>
<div class="helvetica">
<h2>Helvetica Neue</h2>
<p class="note">Six weights</p>
<p class="fw100">ABCabc0123 あのイーハトーヴォの <span class="note">Thin</span></p>
<p class="fw200">ABCabc0123 あのイーハトーヴォの <span class="note">UltraLight</span></p>
<p class="fw300">ABCabc0123 あのイーハトーヴォの <span class="note">Light</span></p>
<p class="fw400">ABCabc0123 あのイーハトーヴォの <span class="note">Regular</span></p>
<p class="fw500">ABCabc0123 あのイーハトーヴォの <span class="note">Medium</span></p>
<p class="fw600">ABCabc0123 あのイーハトーヴォの <span class="note">Bold</span></p>
<p class="fw700">ABCabc0123 あのイーハトーヴォの <span class="note">Bold</span></p>
<p class="fw800">ABCabc0123 あのイーハトーヴォの <span class="note">Bold</span></p>
<p class="fw900">ABCabc0123 あのイーハトーヴォの <span class="note">Bold</span></p>
</div>
<div class="hiragino">
<h2>Hiragino Kaku Gothic ProN</h2>
<p class="note">Only two weights...</p>
<p class="fw100">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw200">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw300">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw400">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw500">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw600">ABCabc0123 あのイーハトーヴォの <span class="note">W6</span></p>
<p class="fw700">ABCabc0123 あのイーハトーヴォの <span class="note">W6</span></p>
<p class="fw800">ABCabc0123 あのイーハトーヴォの <span class="note">W6</span></p>
<p class="fw900">ABCabc0123 あのイーハトーヴォの <span class="note">W6</span></p>
</div>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
h1 {
font-size: 14px;
font-weight: normal;
}
.note {
color: #888;
}
// Generate `.fw{n}00`
@for $i from 1 through 9 {
.fw#{$i}00 {
font-weight: #{$i + "00"};
}
}
.helvetica {
font-family: 'Helvetica Neue', serif;
}
.hiragino {
font-family: 'Hiragino Kaku Gothic ProN', serif;
}
h1 {
font-size: 14px;
font-weight: normal;
}
.note {
color: #888;
}
.fw100 {
font-weight: 100;
}
.fw200 {
font-weight: 200;
}
.fw300 {
font-weight: 300;
}
.fw400 {
font-weight: 400;
}
.fw500 {
font-weight: 500;
}
.fw600 {
font-weight: 600;
}
.fw700 {
font-weight: 700;
}
.fw800 {
font-weight: 800;
}
.fw900 {
font-weight: 900;
}
.helvetica {
font-family: 'Helvetica Neue', serif;
}
.hiragino {
font-family: 'Hiragino Kaku Gothic ProN', serif;
}
<h1>font weight check <span class="note">on Mac OS X 10.10</span></h1>
<div class="helvetica">
<h2>Helvetica Neue</h2>
<p class="note">Six weights</p>
<p class="fw100">ABCabc0123 あのイーハトーヴォの <span class="note">Thin</span></p>
<p class="fw200">ABCabc0123 あのイーハトーヴォの <span class="note">UltraLight</span></p>
<p class="fw300">ABCabc0123 あのイーハトーヴォの <span class="note">Light</span></p>
<p class="fw400">ABCabc0123 あのイーハトーヴォの <span class="note">Regular</span></p>
<p class="fw500">ABCabc0123 あのイーハトーヴォの <span class="note">Medium</span></p>
<p class="fw600">ABCabc0123 あのイーハトーヴォの <span class="note">Bold</span></p>
<p class="fw700">ABCabc0123 あのイーハトーヴォの <span class="note">Bold</span></p>
<p class="fw800">ABCabc0123 あのイーハトーヴォの <span class="note">Bold</span></p>
<p class="fw900">ABCabc0123 あのイーハトーヴォの <span class="note">Bold</span></p>
</div>
<div class="hiragino">
<h2>Hiragino Kaku Gothic ProN</h2>
<p class="note">Only two weights...</p>
<p class="fw100">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw200">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw300">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw400">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw500">ABCabc0123 あのイーハトーヴォの <span class="note">W3</span></p>
<p class="fw600">ABCabc0123 あのイーハトーヴォの <span class="note">W6</span></p>
<p class="fw700">ABCabc0123 あのイーハトーヴォの <span class="note">W6</span></p>
<p class="fw800">ABCabc0123 あのイーハトーヴォの <span class="note">W6</span></p>
<p class="fw900">ABCabc0123 あのイーハトーヴォの <span class="note">W6</span></p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment