CSS 3テキスト効果、フォント
1599 ワード
1、テキストシャドウ
2、
インスタンスでは、長い単語を分割し、次の行に改行できます.
値の説明
normalは、許容されるブレークポイントでのみ改行します(ブラウザはデフォルトの処理を維持します).
break-wordは、長い単語やURLアドレスの内部を改行します.
3、
構文
値
説明
clip
テキストをトリムします.
ellipsis
トリミングされたテキストを表す省略記号を表示します.
string
トリミングされたテキストを表す文字列を使用します.
CSS 3フォント
CSS 3の前に、ウェブデザイナーは、ユーザコンピュータにインストールされたフォントを使用しなければならない.
CSS 3を通じて、webデザイナーは好きな任意のフォントを使用することができます.使用するフォントを見つけたり購入したりすると、必要に応じてユーザーのコンピュータに自動的にダウンロードされます.
Firefox、Chrome、SafariおよびOperaは、
Internet Explorer 9+は、新しい@font-faceルールをサポートしますが、
例:
必要なフォントを使用
新しい@font-faceルールでは、まずmyFirstFontなどのフォントの名前を定義し、そのフォントファイルを指す必要があります.
HTML要素のフォントを使用するには、font-familyプロパティを使用してフォントの名前(myFirstFont)を参照します.
text-shadow
タイトルにシャドウを追加:h1
{
text-shadow: 5px 5px 5px #FF0000;
}
2、
word-wrap
自動改行インスタンスでは、長い単語を分割し、次の行に改行できます.
p {word-wrap:break-word;}
値の説明
normalは、許容されるブレークポイントでのみ改行します(ブラウザはデフォルトの処理を維持します).
break-wordは、長い単語やURLアドレスの内部を改行します.
3、
text-overflow
は、テキストが要素を含んでオーバーフローしたときに起こることを規定する.構文
text-overflow: clip|ellipsis|string;
値
説明
clip
テキストをトリムします.
ellipsis
トリミングされたテキストを表す省略記号を表示します.
string
トリミングされたテキストを表す文字列を使用します.
CSS 3フォント
CSS 3の前に、ウェブデザイナーは、ユーザコンピュータにインストールされたフォントを使用しなければならない.
CSS 3を通じて、webデザイナーは好きな任意のフォントを使用することができます.使用するフォントを見つけたり購入したりすると、必要に応じてユーザーのコンピュータに自動的にダウンロードされます.
Firefox、Chrome、SafariおよびOperaは、
.ttf
(True Type Fonts)および.otf
(OpenType Fonts)タイプのフォントをサポートします.Internet Explorer 9+は、新しい@font-faceルールをサポートしますが、
.eot
タイプのフォント(Embedded OpenType)のみをサポートします.例:
必要なフォントを使用
新しい@font-faceルールでは、まずmyFirstFontなどのフォントの名前を定義し、そのフォントファイルを指す必要があります.
HTML要素のフォントを使用するには、font-familyプロパティを使用してフォントの名前(myFirstFont)を参照します.
@font-face:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}