おはようございます、
くらま天狗です( ̄▽ ̄)b

本日は、ホームページに使う游フォントに関するお話などを少々・・・。

Good morning,
this is Kurama Tengu( ̄▽ ̄)b.

I’d like to talk a little about the story regarding Yu fonts that we use in Home Page.

標準搭載された游フォント:Yu font installed as standard.

Web制作者なら、Windows8.1以降で標準搭載された游フォントに興味のある人も多いのではないでしょうか。Windows Vista以降標準フォントだったメイリオは、明瞭(メイリオの語源)の通りユニバーサルデザインに配慮された読みやすいフォントでしたが、その反面字体としての美しさにはやや欠けるフォントでもありました。

I think there are many Web designers who are interested in Yu font installed as standard after Windows8.1. Meiryo that was standard font after Windows Vista was easy to read that considered universal designs literally as clear (the word origin of Meiryo), but on the other hand, it is a font that lacked a little beauty as font.

ホームページに使用できる游フォント:Yu font that can be used in Home Page.

游ゴシック・游明朝フォントは、Windows8.1以降の全ての端末にインストールされていることが想定できるので、今後Windows7のシェアが減ってくれば、ほぼ全てのWindows端末に入っているという時代が来るでしょう。なお、Windows7でも游フォントを独自にインストールすることが可能です。

As we can anticipate that Yu Gothic and Yu Mincho are installed in all terminals after Windows8.1, so I think the era when these are in almost all of the Windows’s terminals would come when the share of Windows7 decreases in the future. And it is possible to install Yu font uniquely in Windows7.

OS標準搭載の明朝体フォントは久しぶり:Mincho body font OS standard installed was not used for a long time.

游ゴシックは標準的な癖の少ないゴシック体で、また游明朝はWindows標準搭載の明朝体フォントとしては、MS明朝以来久しぶりのフォントになります。MS明朝がアンチエイリアスの効かない見難いフォントでしたので、游明朝にはその分期待がかかります。

Yu Gothic is Gothic body that is standard and with fewer habits, and Micho body is a long time no see font since MS Mincho as Mincho font Windows standard installed. We can have higher expectation against Yu Mincho as MS Mincho was the font that antialiasing didn’t work and hard to see.

Webフォントより優れている点:The point superior to Web font.

現状でもスクリーンフォントとして使えるフォントには、メイリオ以外にGoogleの能登フォントや、さくらインターネット独自のモリサワフォントなどのWebフォントという物がありますが、日本語フォントは欧文フォントとは違って1書体で10メガバイト程度のファイルサイズがあり、低速回線での使用を考えると、日本語のWebフォントの使用は実用的でないと筆者は考えています。そのため、游ゴシック・游明朝の登場は私にとって待望のニュースでした。

As for fonts that can be used as screen fonts now, there are Web fonts such as Google Noto font or Morisawa font original in Sakura Internet beside Meiryo, but Japanese font is different from European font and there is file size of some 10 mega bites by 1 type face.
Because of this, considering the use under the low-speed lines the author thinks it is not practical for the use of Japanese Web fonts. For this reason, it is my longing news for the appearance of Yu Gothic and Yu Mincho.

Internet Exprolerで表示が崩れる問題::The problem is there that the display is collapsed at Internet Explorer.

ただ、残念なことにこのフォントはバグ持ちです。正確にはインターネットエクスプローラー(略してIE)のバグとも言えるでしょう。フォントファミリーに游フォントを指定して各種ブラウザで見てみると、何という事でしょう、IEで見た時だけ文字が上に寄ってしまいます。色々調べた情報によると、IEでだけフォントのベースラインの縦位置が違うようで、これもすでにCSSハック的な方法で対応してしまったサイトが日本中に多々あることを考えると、IEの側がバグを修正してくることは考えにくいような気がします。

Regrettably, however, this font has bug. Correctly, it can be said the bug of Internet Explorer (in short IE). When seeing at each browser designating Yu font as font family,
I was surprised that the letter leaned to the top only when seeing by IE. According to the information I looked into a lot, only IE has different vertical position of font base line, and considering there are many sites in Japan that have corresponded with this by CSS hack ways, I feel it is hard to think that IE will rectify the bugs.

Windows8.1には游フォントのMedium体がない問題:The problem that there is no medium body of Yu font in Windows8.1.

Windows8.1の環境でCSSのコーディングをしていて気付くことなんですが、ボールド体(bold)はまともなんだけど、ノーマル体(normal)の文字が細過ぎる。これも解析した先人様がいらっしゃるので知ることができましたが、Windows8.1の游フォントにはBoldとLightしかインストールされていなくて、normalに相当するMedium体がインストールされていないのでした。このWindows8.1でMedium体が見れない問題はサイト制作者側ではどうすることもできなくて、今のところユーザーがWindows10のパソコンから游フォントのMedium体を自分で持ってくるような対応しか出来ないようで何かと残念です。(とはいえWindowsのバージョンの問題は時間が解決すると考えていますけど。)

It is what I notice while I do CSS coding under the environment of Windows8.1 that the bold is decent but its normal letter is too thin. I know this too as there were those who have analyzed before me, but it said that only bold and light are installed in Yu font of Windows8.1 and there is no medium body installed equal to normal. I’m a bit sad that the site producers can do nothing about the problem that there is no medium body in Windows8.1 and until now the only response that can be made is that users bring the medium body of Yu fonts from Windows10 PC themselves. (Having said that I think time will solve the issue of version of Windows.)

Windows8.1以降とWindows8以前を切り分ける必要がある:There is need to divide after Windows8.1 and before Windows8.

Webのデザインをする時には、Googleのアクセス解析を参考にしていますが、Windows7辺りはまだまだ現役でして(2018年末現在)、その中で游フォントをわざわざインストールしている人は少ないだろうと筆者は考えているので、CSSをコーディングする際にWindowsのバージョン8以前で見ている人と、バージョン8.1以降で見ている人の両方を想定して、そのどちらからでも崩れていないマークアップをすることを心がけております。ここがマークアップの面倒なところであり、逆にマークアップエンジニアの腕の見せ所でもあります。

When making the Web designs, I am referring Google access analysis, but the author is thinking that fewer people bother to install the Yu fonts under the state of Window7 is in active duty (In 2018), so I make sure to make markup that is not being collapsed from both sides, anticipating both people of ones who are seeing before Windows version 8 and ones who are seeing after Windows version 8.1 when make CSS coding. This is the annoying point of markup and on the other hand, it is the chance to show markup engineers’ skills.

font-familyのコード例:Code examples of font-family.

100%全ての環境でテストした訳ではないのでちょっといい加減ですが、筆者が使っている游フォントでのfont-familyの設定を載せておきます。Mac OSXでは游ゴシックよりもヒラギノ角ゴでの表示を優先しています。

It is sloppy a little because I didn’t make test under 100 percent all situations, I will post the settings of font-family in Yu fonts the author is using.

游明朝:YuMincho

font-family :”游明朝”, YuMincho,”ヒラギノ明朝 Pr6 W6″,”Hiragino Mincho Pro”,”メイリオ”, “MS P明朝”,”MS PMincho”,Meiryo, serif;

游ゴシック:YuGothic

font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “Yu Gothic”, “游ゴシック”, YuGothic, “游ゴシック体”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;

さいごに:Finally.

100%の後方互換性を維持することも大事ですが、時には競合サイトに対して何らかの優位性を持たせることが必要になる場面もあります。游フォントを使うなりして、他所が真似できない部分でのこだわりを見せるのもWebデザイン的にはありだと筆者は考えています。

It is important to maintain the 100 percent backward compatibility, but sometime there are cases that there needs to have superiority to competition site. The author thinks that it is OK for Web design to show commitment in parts other designers cannot imitate by using Yu fonts.

コメント(0)

コメントする



※コメントは承認制です。ただちにはページに反映されません。

ツイッター

京都三条会商店街北 薬膳&カフェ 雅(みやび) サイト制作・運営 一般社団法人シシン

コンテンツ

京都の観光地特集京都のラーメン特集