首页 css 正文

我要投稿

css行高-设计人员应如何在文本排版中设置列宽

bendan520 css

2023-08-21 0 7,867 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

伙计们，在这里您想要详细信息，文本排版中的列宽设置。

内容

1.设置字体大小

2.根据您的需要组合

3. 英文列宽

4. 英文行距

5.中文的列宽

6. 中文行距

7.行高禁忌

8. 标题列宽

9. 正文列宽

10. 混合编排

11. 字体选择

1.设置字体大小

字体大小

是字体的大小，文本必须配置大标题 H1-H7、副标题、正文和注释中的相应字体大小。页面的字体大小以 4 为基数递增，最好是奇数。就像第 14 个单词的正文和第 13 个单词的注释一样，这个相对较小的单词可以没有基数 4。无论设计师如何定义字体大小，只要它在视觉上美观且相关，就可以受到任何规则的约束。

此外，所有字体都应使用蓝色和黑色进行调试，并分别应用于蓝色和红色背景。如果黑色背景颜色不好，效果将不会显示。

2.根据您的需要组合

当我们定义字体大小时，可以根据实际项目需求自由匹配标题和正文。在为标题和正文选择字体大小时，要注意它们之间的对比关系，字体大小差异越大，它们的层次关系越显著，但它们之间的差异不能太大，差异会影响整体视觉平衡，给人一种不和谐和不自然的感觉。

例如：标题字体大小 20px，正交大小 12px;标题字体大小 24px，正字大小为 16px。选择哪个标题与哪个正文文本也取决于设计师的审美。

3. 英文列宽

在设置文本列宽之前，您需要了解“行高”和“行宽”之间的区别。前端DIV+CSS和设计Affinity Designer等绘图软件由“行高”定义。CSS 样式行高属性是列宽，该值分别表示为比率、数值和像素。例如：h1.test {行高：112px}，则标题 h1 的列宽为 112 像素;在绘图软件中，控制行顶部和底部之间距离的也是列宽。回到正题，中文的列宽和英文的列宽会有一些差异，英文是指法文一行基线与法文下一行基线之间的距离，如下图所示。

基线是英文字体结构中的一个概念，我们先简单看一下，以后提到字体的时候再说。当我们在绘图软件中填写列宽值时，变化的是上图所示的距离。

4. 英文行距

在英语中，行距没有列宽那么复杂，也不需要画基线。英语线宽与英语相同，是指法语中一行的顶线与法语中下一行的底线之间的距离。其实也可以简单理解为“行距”，称为行宽。另外，如果英文的上下有对应的专有名词，英文字体结构中隐含的下/上两行称为“上行/上行”和“下行/下限线”。这条知识就足够先理解了，后面在字体结构中会提到。

5.中文的列宽

接下来，了解英文列宽。如上所述，英文的列宽是由基线决定的，但英文字体结构与英文字体结构不同，中文中没有基线的概念，那么如何定义列宽。中文的结构是一个没有基线的方字，所以英文的列宽是指一行英文的顶部和下一行的顶部之间的距离。中文在字体结构上没有上/上行和下行的概念，它们只存在于英文字体结构中。

6. 中文行距

中文的行距更容易理解，与英文行距相同。指英语一行的最顶端和下一行英语的底部之间的距离。它也可以理解为行之间的距离。

虽然列宽和行宽的区别不容易区分，有些缠绕，但还是有必要了解它们。

7.行高禁忌

无论是标题、正文还是注释，它们的列宽都不宜过低，低行高会使内容难以阅读，文本之间的完整性会被破坏。标题的字体越大，列宽越小，正文文本的字体越小，列宽越大。当然，这个规则是相对的，行高要合理控制，不能太大或太小。那么如何合理设置列宽，往下看。

8. 标题列宽

标题的列宽由单词决定。在平面设计中css行高，有时列宽可以设置为与字体大小相同，例如，字体大小120pt设置为120pt列宽是没有问题的。页面构建行高是这样估计的，字体大小 x 倍数 = 行高。例如下图，大标题 H3 设置的字体大小为 48px （12a），列宽为 62.4，即 48x1.3 倍 = 62.4。字体大小和列宽的倍数是一点一点测量的，因为字体大小与列宽之比不会大于1.0（1倍），我会根据自己的审美进行测试，从1.0/1.1/1.2/1.3....开始，直到测量我满意的列宽。如下图所示，带颜色的数字是倍数。

最终的列宽仍然由设计师的直觉决定。所以，做设计，就要理性和感性，规则与创意的并存是一个好的设计师需要具备的品质。然后我就以英文文本数字 36px 和英文字体大小 24px 为例，让大家更好地理解。如下图所示：

只需从测试结果中找到您满意的列宽即可。字体大小 x 倍数 = 行高，这里不怕小数位太多的问题。在绘图软件中，它以像素为单位，但有时后端代码使用父后继单元“em”。比如：大标题H3的字体大小是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那么转换成后端代码就是h3.test{行高：1.3em}，直接做就行了，几乎看不到。

9. 正文列宽

让我们继续。正文列宽与标题列宽相同，并且选择的列宽因字体大小而异。标题栏的宽度倍数在1.0-1.6之间，主栏的宽度在1.6-2.4之间变化，没有一定的标准，还是根据项目情况和实际效果综合看法。如下图所示，彩色数字是列宽的倍数。

说到这里，我

经常被问到文本列宽的值如何设置，大家在设计的时候都会用1.5/2倍的关系，但这不是绝对的，行高的倍数也受字体大小的影响。像新浪新闻的文字，字体大小为18px，行高为32px，即字体大小（18px）x 1.777（倍数）=32px（行高），如果列宽倍数设置为2倍以上，字与词之间的距离变大，不易阅读。

10. 混合编排

好的，完全理解以上所有内容可以混合标题、正文和注释。大标题字体大小为40px，字体大小为20px，正文栏宽为40px，评论字体字体大小为18px，评论行高度为32px，标题和正文宽度为88px，正文和正文宽度为64px。

11. 字体选择

选择字体没有技术集中。页面常用的字体只有几种，Microsoft雅黑、宋提、维达纳、阿里亚尔、时代新罗马，就不举例了。中文最常用的网站是Microsoft Yahei + Arial，浏览器兼容性也是最好的。有些人在看这里可能还会问，加载其他字体也可以啊，没错，企业网站可以加载其他字体，但是像做功能页面、后台页面一样，加载其他字体几乎是不可能的。因此css行高，仍然需要选择与实际项目需求/品牌需求相匹配的字体样式。

文章来自车站酷

使用 CSS，您可以创建鼠标以移入并显示下拉菜单的效果。

1. 下拉菜单的实现

当鼠标移动到指定元素时，将显示一个下拉菜单。代码如下：



    
    简单的下拉菜单

.dropdown{
    position:relative;
    display:inline-block;
}
.dropdown-content{
    min-width:200px;
    border:1px solid black;
    position:absolute;
    display:none;
}
.dropdown:hover .dropdown-content{
    display:block;
}




    鼠标你过来，我为你展示下拉菜单。
    

        
下拉菜单 1
        下拉菜单 2

实例解析：

网页部分：

可以使用任何 HTML 元素打开下拉菜单，例如、或等元素。

之后，使用

元素以创建包含下拉菜单内容的容器并自定义其显示位置。

最后，再次使用

元素到

包装元素并使用 CSS 设置下拉内容的样式。

CSS部分：

.dropdown 类使用 position：relative，它将设置下拉菜单的内容放在下拉按钮的右下角（使用 position：absolute ）。

.dropdown-content 类是实际的下拉菜单。默认值是隐藏的，并在键盘移动到指定元素后显示。

注意：在前面的示例中，下拉菜单容器的间距设置为最小 200px，可以自行定义。

如果希望下拉菜单与下拉按钮的长度匹配，可以将长度设置为 100%，并且可以指定 overflow：auto 属性以在小格式屏幕上滚动。

：悬停选择器用于显示下拉菜单

当用户将键盘连接到下拉按钮，并且下拉菜单容器设置为显示：阻止时;

2. 创建下拉菜单

根据反例，创建一个下拉菜单并允许用户选择列表中的项目。



    
    下拉菜单实例

/* 容器  - 需要定位下拉内容 */
.dropdown{
    position:relative;
    display:inline-block;
}
/* 下拉菜单内容，设置为隐藏 */
.dropdown-content{
    min-width:150px;
    background-color:#F5F5F5;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}
/* 下拉按钮样式 */
.dropbtn{
    color:white;
    font-size:16px;
    padding:15px;
    border:none;
    background-color:#00CD66;
    cursor:pointer;
}
/* 下拉菜单链接的样式 */
.dropdown-content a{
    color:black;
    text-decoration:none;
    padding:12px 15px;
    display:block;
}
/* 鼠标移入后显示下拉菜单 */
.dropdown:hover .dropdown-content{
    display:block;
}
/* 鼠标移入后修改链接的背景色 */
.dropdown-content a:hover{
    background-color:#E8E8E8;
}
/* 下拉菜单显示后修改下拉按钮的背景色 */
.dropdown:hover .dropbtn{
    background-color:#008B00;
}




    
    

        下拉菜单项 1
        下拉菜单项 2
        下拉菜单项 3

在 Chrome 中，当鼠标移动到下拉菜单按钮时，它会显示如下：

在前面的示例中，下拉菜单的内容设置了 box-shadow 属性，该属性主要用于添加阴影，使下拉菜单看起来像一张“卡片”。此属性指定下拉菜单的水平阴影为 0，垂直方向的阴影为 8 像素，模糊距离为 15 像素，规格为 0 阴影，颜色为黄色，透明度为 0.2。

下拉菜单键使用 cursor 属性，该属性用于指定键盘光标的类型，即将键盘触笔放置在元素边界内时使用的光标形状。

下表列出了此属性的所有值：键盘可以移动到相应的属性值以查看光标的形状。

价值

描述

网址

要使用的自定义游标的 URL。注意：如果 URL 没有定义的可用游标，则此列表的末尾仍会定义普通游标。

违约

默认光标，通常为箭头。

自动

默认情况下，浏览器设置光标。

指针

光标显示为指示链接的手形，即手形。

发短信

此光标指示文本。

等

此光标表示程序正忙，并显示为一个转动的红色小圆圈。

帮助

此光标指示可用的帮助，并在右下角显示为带有问号的箭头。

十字准线

光标显示为十字准线。

移动

此光标指示可以连接对象。

电子调整大小

此光标指示方框的边缘可以连接到右侧（东）。

ne-调整大小

此光标指示方框的边缘可以向下和向右（北/东）连接。

NW-调整大小

此光标指示方框的边缘可以向下和向左（北/西）连接。

n 调整大小

此光标指示方框的边缘可以向下（向北）连接。

SE-调整大小

此光标指示方框的边缘可以向上和向右（南/东）连接。

软件调整大小

此光标指示方框的边缘可以向上和向左连接（南/西）。

S 调整大小

此光标指示方框的边缘可以向上（南）连接。

W-调整大小

此光标指示方框的边缘可以连接到左侧（西部）。

3. 下拉菜单的对齐方式

如果下拉菜单设置为 float：left 样式，那么还需要设置 left：0，即菜单内容从左到右从左：0 显示，否则会超出浏览器的左窗口。

如果下拉菜单设置为浮动：右样式，则默认为从左到右显示，

并且菜单内容会超过浏览器的左侧窗口，因此需要设置 right：0使下拉菜单内容从右到左。



    
    下拉菜单对齐

/* 容器  - 需要定位下拉内容 */
.dropdown{
    position:relative;
    display:inline-block;
}
/* 下拉菜单内容，设置为隐藏 */
.dropdown-content{
    min-width:150px;
    background-color:#F5F5F5;
    position:absolute;
    right:0;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}
/* 下拉按钮样式 */
.dropbtn{
    color:white;
    font-size:16px;
    padding:15px;
    border:none;
    background-color:#00CD66;
    cursor:pointer;
}
/* 下拉菜单链接的样式 */
.dropdown-content a{
    color:black;
    text-decoration:none;
    padding:12px 15px;
    display:block;
}
/* 鼠标移入后显示下拉菜单 */
.dropdown:hover .dropdown-content{
    display:block;
}
/* 鼠标移入后修改链接的背景色 */
.dropdown-content a:hover{
    background-color:#E8E8E8;
}
/* 下拉菜单显示后修改下拉按钮的背景色 */
.dropdown:hover .dropbtn{
    background-color:#008B00;
}




    
    

        下拉菜单项 1
        下拉菜单项 2
        下拉菜单项 3
    


    
    

        下拉菜单项 1
        下拉菜单项 2
        下拉菜单项 3

在Chrome中，当鼠标移动到右侧下拉按钮时下拉框css，它如下所示：

4. 下拉图片

在示例下，将图像添加到下拉菜单：



    
    下拉图片

/* 容器  - 需要定位下拉内容 */
.dropdown{
    position:relative;
    display:inline-block;
}
/* 下拉菜单内容，设置为隐藏 */
.dropdown-content{
    min-width:300px;
    background-color:#F5F5F5;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}
/* 鼠标移入后显示下拉菜单 */
.dropdown:hover .dropdown-content{
    display:block;
}
/* 图片文字描述的样式 */
.heading{
    padding:15px;
    text-align:center;
}




    
    

        
        
最美的时光，留给最美的风景！

在 Chrome 中，当鼠标在图像下拉按钮中移动时，它会显示如下：

5. 导航栏下拉菜单

在以下示例中，向导航栏菜单添加一个下拉菜单：



    
    导航栏下拉菜单

*{margin:0;padding:0;}
ul{
    list-style-type:none;
    background-color:#333;
    overflow:hidden;
}
li{
    float:left;
}
li a, .dropbtn{
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}
li a:hover, .dropdown:hover .dropbtn{
    background-color:#111;
}
.dropdown{
    display:inline-block;
}
.dropdown-content{
    min-width:200px;
    background-color:#F9F9F9;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
    color:black;
    padding:12px 16px;
    text-decoration:none;
    display:block;
}
.dropdown-content a:hover{
    background-color:#F1F1F1;
}
.dropdown:hover .dropdown-content{
    display: block;
}




    在线商城
    产品展示
    
        下拉菜单
        

            子菜单 1
            子菜单 2
            子菜单 3