font-family(フォント, 総称ファミリ, 注意点)

font-familyプロパティの指定をする上で知っておくとよいことを紹介します。フォントの種類、代表的なフォント、Webフォントなどについて取り上げます。

前提知識

フォントの種類

762-html-css-font-family_00.png

日本語フォントであれば、 明朝体ゴシック体 の使い分けを考えます。明朝体 は、ウロコがついていて「長文」などに向いています。ゴシック体 は、文字線の太さがほぼ同じで「タイトル」や「見出し」に向いています。

欧文フォントであれば、 セリフサンセリフ の使い分けを考えます。

代表的なフォント

代表的なフォントについて記載します。

種類 フォント 補足
明朝体 游明朝体 Windows
明朝体 ヒラギノ明朝 Mac
明朝体 Noto Serif JP Google Fonts
明朝体 小塚明朝 Adobe Fonts
ゴシック体 メイリオ Windows
ゴシック体 ヒラギノ角ゴ Mac
ゴシック体 Noto Sans JP Google Fonts
ゴシック体 小塚ゴシック Adobe Fonts
セリフ Times New Roman Windows, Mac
サンセリフ Arial Windows, Mac
サンセリフ Helvetica Mac
サンセリフ Roboto Google Fonts

Webフォント

フォントを利用する上での注意点ですが、指定フォントがインストールされてないパソコンでは表示できません。

Webフォント( Google Fonts など)といって、インターネット上で配信されているフォントデータを以下のように取り込み、Webサイトで利用することで、Mac、Windowsの違いなどを考慮せずともフォントを利用できます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

ただし、日本語フォントは容量が大きいので、ページの表示速度に影響を与えるデメリットもあります。デメリットを考慮して、Webフォントを利用する場合は、欧文フォントのみに利用するなどにしたほうが良いかと思います。

font-familyの指定方法

フォントは font-familyプロパティ で指定できます。

font-family: フォントファミリ名1, フォントファミリ名2, 総称ファミリ名;

上記例では、フォントファミリ名1 がPCにインストールされていれば、 フォントファミリ名1 が利用されます。
フォントファミリ名1 がPCにインストールされておらず、 フォントファミリ名2 がPCにインストールされていれば、 フォントファミリ名2 が利用されます。

先に記述したフォントファミリが優先されるため、日本語フォント より先に 欧文フォント を指定しておくと良いです。

最後に、総称ファミリ名 を追加しておくことが推奨されています。総称ファミリ名 としては、ゴシック系の sans-serif と明朝系の serif などを指定できます。フォントファミリ名1 フォントファミリ名2 ともPCにインストールされてない場合、総称ファミリ名で指定した系統のフォントを自動で表示されます。

/* 指定例 */
font-family: Arial, "Hiragino Kaku Gothic ProN", sans-serif;

参考・関連

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。