CSS-Schriftart steuert mehrere Transformationen von Schriftarten-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

CSS-Schriftart steuert mehrere Transformationen von Schriftarten

Jan 02, 2021 am 09:31 AM

css font

CSS-Schriftart steuert mehrere Transformationen von Schriftarten

Tutorial-Empfehlung: CSS-Video-Tutorial

CSS-Schrifteigenschaften definieren die Schriftfamilie, Größe, Fettschrift, den Stil (z. B. Kursivschrift) und die Verzerrung (z. B. Kapitälchen) des Textes. Die Schriftfamilie steuert die Schriftart, Aufgrund einzelner Computer variieren die auf dem System installierten Schriftarten, sind jedoch grundsätzlich mit drei Schriftarten ausgestattet: Black, Song und Microsoft Yahei.

font-size steuert die Schriftgröße. Wenn wir die Schriftgröße festlegen, legen wir deren Breite und Höhe fest. Im Allgemeinen beträgt die Standardschriftgröße des Computersystems 16 Pixel, daher sollte dies nicht der Fall sein kleiner als 16px sein, 1em=16px ;font-size控制字体大小，我们设置字体大小是设置它的宽度，它的高度一般电脑系统默认字体大小是16px，所以字体大小尽量不要低于16px，1em=16px；

font-weight: bold;/*控制字重一般是100-900 常用lighter(细体) normal（正常）bold加粗 */

至于这个font-style

font-weight: Bold;/*Die Kontrollschriftstärke beträgt im Allgemeinen 100-900, üblicherweise wird leichter (feiner Körper) normal (normal) fett verwendet*/

Was diesen Schriftstil betrifft, ist die Standardeinstellung normal, was normal ist. Wenn Sie den Schriftstil kursiv festlegen, ist der Effekt tatsächlich ähnlich wie bei diesem <em>< /em>; zwischen Text Wenn die für den Abstand verwendete Zeilenhöhe gleich der Höhe ist, wird er vertikal zentriert.

Normalerweise die Abkürzung für Schriftart: Schriftart: Stilstärke Größe/Zeilenhöhe Schriftfamilie /*Die beiden Anforderungen, die angezeigt werden müssen, sind Größe und Schriftfamilie*/

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;css常用样式font字体的多种变换&lt;/title&gt;
    &lt;style&gt;
        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*/
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div&gt;技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,
        欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好 &lt;/div&gt;
    &lt;p&gt;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?&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Informationen zu Stilvererbungsproblemen/*Textbezogene Stile wird vererbt*/Der Code wird unten angezeigt:

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

    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div&gt;
        &lt;p&gt;&lt;span&gt;linux php linux&lt;/span&gt;&lt;/p&gt;
        &lt;p&gt;&lt;span&gt;linux linux php linux&lt;/span&gt;&lt;/p&gt;
        &lt;p&gt;&lt;span&gt;linux linux php linux&lt;/span&gt;&lt;/p&gt;
        &lt;p&gt;&lt;span&gt;linux linux php linux&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;    
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Weitere Programmierkenntnisse finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonCSS-Schriftart steuert mehrere Transformationen von Schriftarten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn