CSS フォントはフォントの複数の変換を制御します-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS フォントはフォントの複数の変換を制御します

青灯夜游

Jan 02, 2021 am 09:31 AM

cssfont

CSS フォントはフォントの複数の変換を制御します

チュートリアルの推奨事項: css ビデオチュートリアル

CSS フォントプロパティは、フォントファミリー、サイズ、太字、スタイル (斜体など)、および変形を定義します。 (スモールキャップなど) font-family はフォントを制御します。各コンピュータシステムにインストールされているフォントは異なるため、基本的には Heilongti、Songti、Microsoft Yahei の 3 つのフォントがあります。

font-sizeフォントサイズを制御します。フォントサイズを設定するときは、幅と高さを設定します。一般に、コンピュータシステムのデフォルトのフォントサイズは 16 ピクセルなので、フォントサイズは 16px 未満であってはなりません。1em=16px;

font-weight:bold;/*コントロールフォントのウェイトは通常 100 ～ 900 です。一般的に使用されるライト (細字) 標準です。 (通常) ボールドボールド*/

この font-style については、デフォルトは通常です。font-style: italic; italic を設定すると、実際にはSame as this 効果はほぼ同じで、テキスト間の間隔に使用される行の高さがその高さと等しい場合、垂直方向の中央に配置されます。

通常、フォントフォントの略語: font:style Weight size/line-heigt font-family /*表示する必要がある 2 つの要件は、size と font-family*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css常用样式font字体的多种变换</title>
    <style>
        div{
            font-family: &#39;Microsoft YaHei&#39;;/*微软雅黑*/
            /* font-family: &#39;Lucida Sans&#39;,&#39;Lucida Sans Regular&#39;, 
            &#39;Lucida Grande&#39;, &#39;Lucida Sans Unicode&#39;, Geneva,
             Verdana, sans-serif; */
            /*字体加上双引号或者单引号，当有多个字体的时候，中间逗号分开*/
            color:#f90;
            font-size: 24px;/*控制字体大小*/
            font-weight: bold;
            /*控制字重 常用lighter(细体) normal（正常）bold加粗 */
            font-style: italic;/*等同于em*/
            line-height: 30px;
        }
        /*font字体的简写:font:style weight size/line-heigt font-family*/
        /*要求必须出现的2个是 size font-family*/
        p{  
            font: 24px/1.5em &#39;Lucida Sans&#39;,&#39;Lucida Sans Regular&#39;,
             &#39;Lucida Grande&#39;, &#39;Lucida Sans Unicode&#39;, 
             Geneva, Verdana, sans-serif;
            letter-spacing: 1px;/*英文字母间距*/
            word-spacing: 10px;/*英文单词间距*/
        }
        P::first-letter{
            text-transform: capitalize;
        }/*第一个字母::first-letter*/
        p::first-line{
            color:red;
        }/*第一行::first-line*/
    </style>
</head>
<body>
    <div>技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,
        欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好 </div>
    <p>Technology is king world, I want to ask if the scenery on 
    the top of Qingtian Mountain is the king of technology, 
        I want to ask whether the scenery of Qingtian Peak is 
        the king of technology. If the technology is the king of the world, 
        I would like to ask whether the scenery on the top of 
        Qingtian Mountain is the king of the world. Is the scenery good?</p>
</body>
</html>

スタイルについて継承質問/*テキストに関連するスタイルは継承されます*/コードは以下に示されています:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        p{
            font-size: 20px;
            font-family: 微软雅黑;    
            color:#f00;
            font-weight:bold;
            font-style:italic;
            word-spacing:15px;
        }

    </style>
</head>
<body>
    <div>
        <p><span>linux php linux</span></p>
        <p><span>linux linux php linux</span></p>
        <p><span>linux linux php linux</span></p>
        <p><span>linux linux php linux</span></p>
    </div>    
</body>
</html>

プログラミング関連の知識については、プログラミング教育を参照してください。！

以上がCSS フォントはフォントの複数の変換を制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。