@font-face概要CSSプロパティ「@font-face」を指定すると、webフォントを使用することができるようになります。そもそもユーザーはWebページを閲覧する際には、その閲覧しているPCまたは端末にインストールされているフォントで表示が行われます。このプロパティを使用すると、指定されたインターネットサーバー上のフォント(webフォント)を使用するので、ユーザーのフォント環境に左右されることなく、製作者の意図したフォントでの表示をすることができます。}</style>ただし注意しなければならないのは、閲覧するタイミングでフォントデータのダウンロードが行われるので、ファイルのデータサイズや、あまりにも多くのフォントを使用するとページの読み込み速度が遅くる場合もあり、ユーザーにとってマイナスに働く面もあるので注意しましょう。font-familyフォント名を指定しますsrcフォントのurlを指定しますオプション項目プロパティの詳細ついては各ページを参照してください。規則で定義するUnicodeコードポイントの範囲ですフォントの形式についてWebフォントのファイル形式の一覧です。指定するときはフォントのURLに続けて、半角スペースで区切って記述します。カンマで区切って複数指定することができます。Formatフォントです。format("truetype")TrueTypeフォントです。format("opentype")OpenTypeフォントです。format("embedded-opentype")Embedded-OpenTypeフォントです。8以前で必要とされる形式です。format("svg")SVGフォントです。このファイル形式ですが、閲覧する環境によって、対応しているフォントのファイル形式が異なっています。Format)の記述のみでもよいかもしれません。format("woff");}プロパティの種類について「font」プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。Fontsをつかったサンプルコードです。プロパティで該当のfont名を指定します。1.0関連CSSプロパティ@font-facefontfont-size-adjustfont-stretchfont-familyfont-sizefont-variantfont-stylefont-weight@ルール@keyframesUI関連cursoroutlineoutline-offsetoutline-widthoutline-styleoutline-colorカウンターcounter-incrementcounter-resetテーブル(表)テキスト関連white-spacetext-transformtext-shadowtext-overflowtext-decorationtext-decoration-styletext-decoration-linetext-decoration-colortext-align-lasttext-indenttext-alignフィルター効果filterフォーマットline-heightletter-spacingフォント@font-facefontfont-size-adjustfont-stretchfont-familyfont-sizefont-variantfont-stylefont-weightフレックスボックスフロートclipfloatclearボックスモデルwidthheightmin-widthmin-heightmax-widthmax-heightvisibilitybox-sizingoverflowoverflow-yoverflow-xマージンmarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-leftメディアクエリ@mediaリストlist-style-imagelist-style-typelist-style-positionlist-style変形transitiontransition-timing-functiontransition-propertytransition-delaytransition-durationtransformtransform-styletransform-origin段組みcolumnscolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-fillcolumn-gapcolumn-widthcolumn-count罫線borderborder-styleborder-colorborder-widthborder-topborder-top-styleborder-top-colorborder-rightborder-top-widthborder-right-styleborder-right-colorborder-right-widthborder-bottomborder-bottom-styleborder-bottom-colorborder-bottom-widthborder-leftborder-left-styleborder-left-colorborder-left-widthborder-imageborder-image-sourceborder-image-widthborder-image-sliceborder-image-outsetborder-image-repeatborder-radiusborder-bottom-left-radiusborder-bottom-right-radiusborder-top-right-radiusborder-top-left-radius背景backgroundbackground-imagebackground-attachmentbackground-clipbackground-colorbackground-originbackground-repeatbackground-size色opacity色と透明度color装飾box-shadow記述法backface-visibilityvertical-alignuser-select配置displayrightlefttopbottompositionz-index「WWWクリエイターズ」は、より多くの人が開発とウェブを楽しむための目指したウェブサイトです。コマンドラインやgitなど、開発ビギナーのつまづきやすい部分を共有しています。})(jQuery);閉じる。