CSS 3テキスト効果、フォント

1599 ワード

1、テキストシャドウ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;
}