font-family 検証Win/Mac

font-family-win-mac.markdown

font-family 検証Win/Mac

A Pen by Pistol on CodePen.

License.

index.pug

p win macの実機で見てみましょう
.lay
  .fontUI.new
    .org
      p.type new font
      h1 題名のある仮想環境isTitle0123456789カタカナ
      h2 題名のある仮想環境isTitle0123456789カタカナ
      p.tex 祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらは（わ）す。
      p おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。is Text 0123456789
      h2 題名のある仮想環境isTitle0123456789カタカナ
      p Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nihil quam magnam commodi praesentium adipisci quibusdam quod voluptatum! Eligendi quam praesentium repellat dignissimos ducimus?

  .fontUI.old
    .org 
      p.type.old old font
      h1 題名のある仮想環境isTitle0123456789カタカナ
      h2 題名のある仮想環境isTitle0123456789カタカナ
      p.tex 祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらは（わ）す。
      p おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。is Text 0123456789
      h2 題名のある仮想環境isTitle0123456789カタカナ
      p Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nihil quam magnam commodi praesentium adipisci quibusdam quod voluptatum! Eligendi quam praesentium repellat dignissimos ducimus?

style.sass

html
  background-color: lightgray
  font-size: 100%
body
  // sample styling  
  background-color: white
  margin: 4vw auto 2vw
  padding: 2vh 4vw
  width: clamp(360px, 70%, 960px) // clamp is IE don't move
  min-height: 80vh
  color: #223
  line-height: 1.5
  // "游ゴシック Medium", YuGothic,"游ゴシック体"
  /*
   * Win "BIZ UDPGothic", "Yu Gothic Medium", Yu Gothic Meduim,"メイリオ", Meiryo
   *** TODO: IE最適化 ***
   * Mac Avenir, "Yu Gothic Medium", Yu Gothic Meduim, "Hiragino Kaku Gothic ProN", "Hiragino Sans"
   */

  /* ===========================================================
   *  FIXME！ Hiragino Sans or Hiragino Kaku Gothic ProN on Mac
   * ===========================================================
   */
  font-family: Avenir, -Segoe UI, Arial, BIZ UDPGothic, "Yu Gothic Medium", Yu Gothic Meduim, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif

  font-weight: 400
  //transform: rotate(0.03deg)
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  font-size: 0.875rem

h1, h2, h3, h4, h5
  // "游ゴシック Bold", YuGothic, "游ゴシック体"
  // *** TODO: IE最適化 Yu Gothic UIなど ***
  // font-family: Yu Gothic UI,"Yu Gothic Medium", YuGothic, sans-serif
  font-weight: 600
  line-height: 1.2

p
  &.tex
    font-size: 16px
  &.type
    font-size: 20px
    background-color: lighten(yellow, 20%)
    text-align: center
    padding: 4px
    &.old
      background-color: lighten(gray, 40%)

.lay
  display: flex
  .fontUI
    margin: 0 12px

// 現在のフォントセット
.fontUI
  &.old .org
    >*
      font-family:  Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif