

<template>
    <table class="demo-typo-size" style="width:550px;background-color:cornflowerblue;color:white;padding:30px;border:5px solid #0094ff;margin:20px;">
            <tr>
                <td>级别</td>
                <td>字体大小</td>
                <td class="color-dark-light">Demo演示</td>
            </tr>
            <tr v-for="(fontSize, i) in fontSizes"
                :key="i"
                :style="`font-size: var(--el-font-size-$fontSize.type)`">
                <td align="left"> fontSize.level </td>
                <td align="left">
                    
            useCssVar(`--el-font-size-$fontSize.type`).value +
            ' ' +
            formatType(fontSize.type)
                    
                </td>
                <td>逆境清醒</td>
            </tr>
    </table>
</template>

<script lang="ts" setup>
    import  useCssVar  from '@vueuse/core'

    const fontSizes = [
        
            level: 'Supplementary text',
            type: 'extra-small',
        ,
        
            level: 'Body (small)',
            type: 'small',
        ,
        
            level: 'Body',
            type: 'base',
        ,
        
            level: 'Small Title',
            type: 'medium',
        ,
        
            level: 'Title',
            type: 'large',
        ,
        
            level: 'Main Title',
            type: 'extra-large',
        ,
    ]

    function formatType(type: string) 
        return type
            .split('-')
            .map((item) => item.charAt(0).toUpperCase() + item.slice(1))
            .join(' ')
    
</script>

2、行高

通常在遇到多行文字的时候，设置不同的 line-height 会有不同的渲染效果，一般设置至少为 1.5。

element-ui 在大部分组件的实现中直接写死了行高的大小，不过通常更好的方式是使用无单位的值而不是具体的大小，因为一旦你更改了字体大小，如果用无单位值就不需要再手动改行高了。另外一特定场景是如果文字的大小要随页面的缩放而变化，使用无单位的值可以确保行高也会等比例缩放。

element-ui 在 packages/theme-chalk/src/common/var.scss 中定义了行高：

<script lang="ts" setup>
import  isDark  from '~/composables/dark'
</script>

<template>
  <div>
    <ul class="lineH-right">
      <li>line-height:1 <span>No line height</span></li>
      <li>line-height:1.3 <span>Compact</span></li>
      <li>line-height:1.5 <span>Regular</span></li>
      <li>line-height:1.7 <span>Loose</span></li>
    </ul>
  </div>
</template>

3、Font-family

font-family:

'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

五、总结

1	Element Plus 实例详解（一）__安装设置
2	Element Plus 实例详解（二）___Button 按钮
3	Element Plus 实例详解（三）___Date Picker 日期选择
4	Element Plus 实例详解（四）___Border 边框
5	Element Plus 实例详解（五）___Scrollbar 滚动条
6	Element Plus 实例详解（六）___Progress 进度条
7	Element Plus 实例详解（七）___Typography 排版
8	Element Plus 实例详解（八）___Radio 单选框
9	Element Plus 实例详解（九）___
10	Element Plus 实例详解（十）___
11	Element Plus 实例详解（十一）___
12	Element Plus 实例详解（十一）___

推荐阅读：

31		Element Plus 实例详解（一）___安装设置
30		Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
29		SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
28		查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决
27		别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
26		2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特
25		2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）
24		HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
23		草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
22		【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
21		python爱心源代码集锦（18款）
20		巴斯光年python turtle绘图__附源代码
19		Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
18		草莓熊python turtle绘图代码（玫瑰花版）附源代码
17		立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦
16		皮卡丘python turtle海龟绘图（电力球版）附源代码
15		【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)
14		草莓熊python turtle绘图（风车版）附源代码
13		用代码过中秋，python海龟月饼你要不要尝一口？
12		《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念
11		用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）
10		Python函数方法实例详解全集(更新中...)
9		matplotlib 自带绘图样式效果展示速查（28种，全）
8		手机屏幕坏了____怎么把里面的资料导出（18种方法）
7		2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状
6		Python中Print()函数的用法___实例详解(全，例多）
5		色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)
4		Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
3		Tomcat 启动闪退问题解决集（八大类详细）
2		Tomcat端口配置（详细）
1		tomcat11、tomcat10 安装配置（Windows环境）（详细图文）

PHP中get()和set()的用法实例详解

在PHP5中，预定义了两个函数“__get()”和“__set()”来获取和赋值其属性，对每个字段进行set和get的操作。只需要加上两个魔术方法即可

php面向对象_get(),_set()的用法
一般来说，总是把类的属性定义为private，这更符合现实的逻辑。但是，对属性的读取和赋值操作是非常频繁的，因此在PHP5中，预定义了两个函数“__get()”和“__set()”来获取和赋值其属性。类似于java中的javabean的操作，使用的方法也类似，只是不需要像javabean中那样，对每个字段进行set和get的操作。只需要加上两个魔术方法即可。即私有成员的设值和取值的操作。在PHP5中给我们提供了专门为属性设置值和获取值的方法，“__set()”和“__get()” 这两个方法，这两个方法不是默认存在的，而是我们手工添加到类里面去的，像构造方法(__construct())一样,类里面添加了才会存在，可以按下面的方式来添加这两个方法，当然也可以按个人的风格来添加：

复制代码代码如下:

 
//__set()方法用来设置私有属性 
public function __set($name,$value){ 
$this->$name = $value; 
} 
//__get()方法用来获取私有属性 
public function __get($name){ 
return $this->$name; 
} 

__get() 方法：这个方法用来获取私有成员属性值的,有一个参数，参数传入你要获取的成员属性的名称，返回获取的属性值，这个方法不用我们手工的去调用，因为我们也可以把这个方法做成私有的方法，是在直接获取私有属性的时候对象自动调用的。因为私有属性已经被封装上了，是不能直接获取值的，但是如果你在类里面加上了这个方法，在使用“echo$p1->name”这样的语句直接获取值的时候就会自动调用__get($name)方法，将属性name传给参数$name，通过这个方法的内部执行，返回我们传入的私有属性的值。如果成员属性不封装成私有的，对象本身就不会去自动调用这个方法。

__set() 方法：这个方法用来为私有成员属性设置值的，有两个参数，第一个参数为你要为设置值的属性名，第二个参数是要给属性设置的值，没有返回值。这个方法同样不用我们手工去调用，它也可以做成私有的，是在直接设置私有属性值的时候自动调用的，同样属性私有的已经被封装上
了，如果没有__set()这个方法，是不允许的，比如：$this->name=‘zhangsan‘,这样会出错，但是如果你在类里面加上了 __set($property_name, $value)这个方法，在直接给私有属性赋值的时候，就会自动调用它，把属性比如name传给$property_name,把要赋的值 “zhangsan”传给$value，通过这个方法的执行，达到赋值的目的。如果成员属性不封装成私有的，对象本身就不会去自动调用这个方法。为了不传入非法的值，还可以在这个方法给做一下判断。代码如下：

复制代码代码如下:

 
<?php 
class Person 
{ 
//下面是人的成员属性，都是封装的私有成员 
private $name; //人的名子 
private $sex; //人的性别 
private $age; //人的年龄 
//__get()方法用来获取私有属性 
private function __get($property_name) 
{ 
echo "在直接获取私有属性值的时候，自动调用了这个__get()方法<br>"; 
if(isset($this->$property_name)) 
{ 
return($this->$property_name); 
} 
else 
{ 
return(NULL); 
} 
} 
//__set()方法用来设置私有属性 
private function __set($property_name, $value) 
{ 
echo "在直接设置私有属性值的时候，自动调用了这个__set()方法为私有属性赋值<br>"; 
$this->$property_name = $value; 
} 
} 
$p1=newPerson(); 
//直接为私有属性赋值的操作，会自动调用__set()方法进行赋值 
$p1->name="张三"; 
$p1->sex="男"; 
$p1->age=20; 
//直接获取私有属性的值，会自动调用__get()方法，返回成员属性的值 
echo "姓名：".$p1->name."<br>"; 
echo "性别：".$p1->sex."<br>"; 
echo "年龄：".$p1->age."<br>"; 
?> 

程序执行结果：
在直接设置私有属性值的时候，自动调用了这个__set()方法为私有属性赋值
在直接设置私有属性值的时候，自动调用了这个__set()方法为私有属性赋值
在直接设置私有属性值的时候，自动调用了这个__set()方法为私有属性赋值
在直接获取私有属性值的时候，自动调用了这个__get()方法
姓名：张三
在直接获取私有属性值的时候，自动调用了这个__get()方法
性别：男
在直接获取私有属性值的时候，自动调用了这个__get()方法
年龄：20
以上代码如果不加上__get()和__set()方法，程序就会出错，因为不能在类的外部操作私有成员，而上面的代码是通过自动调用__get()和__set()方法来帮助我们直接存取封装的私有成员的。

以上是关于Element Plus 实例详解___Typography 排版的主要内容，如果未能解决你的问题，请参考以下文章

PHP中__get()和__set()的用法实例详解

Python 魔法方法详解

__attribute__之section详解 ------ 把函数指定到具体某个section 之 RT-thread 实例详解

python魔法方法详解

Python魔法方法详解

PHP中__get()和__set()的用法实例详解