CSS篇1——有关文本处理font的那些事

2915次浏览

前言

之前博客文章不成体系,主要是一些突然想到的零散知识点。本文及后面几篇文章,将推出一系列文章。帮忙梳理知识点。提高技能。本文着重讲解css有关文本处理font的那些事。之所以先从font说起,是因为UED对字体要求比较高,很多朋友还原UED设计稿之后,出来的效果,UED并不满意。其中,除了屏幕,自适应等原因之外,字体文本处理也是一个重要因素。

1、ex 实现文字和图标垂直居中

ex单位IE6时代就支持了,主要是相对字母x的高度,可以实现文字和图标对齐,不受文字字体和字号的影响。

如下图:

enter image description here

html

haorooms博客<i class="icon-row"></i>

css

.icon-row{
  display: inline-block;
  width:20px;
  height:1ex;
  background:url(row.png) no-repeat center;
  background-size:contain
}

2、font-size 0作用及错误用法

font-size:0的作用,我之前博客文章应该有提及。

1、可以清除字体引起的间距

2、可以将文本隐藏

不正确的用法:

看到有的网页中,用rem单位,为了方便计算(因为1rem =16px,16*0.625=10px,width:14px,可以写成width:1.4rem)。将根目录字体设置如下:

html{
 font-size:62.5%
}

但是chrome浏览器最小字体12px的限制,根据字号计算,是12px不是10px,因此,计算就不是很准确了!

想真的是10px,可以如下设置:

    html{
     font-size:625%
    }

font-size:14px = font-size:.14rem

这样可能也有些问题,但是比上面的62.5%要正确多了!

3、font-family

"serif"// 衬线字体
"sans-serif"//无衬线字体
"cursive"//手写字体
"fantasy"// 奇幻字体
"monospace"// 等宽字体
"system-ui" //系统UI字体

我们常用的微软雅黑、苹方字体,都是无衬线字体

具体可以看下:https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family

移动端web开发,默认中文字体不一样但都是无衬线,可以直接如下:

body{
font-family:sans-serif;
}

指定中文字体,反而画蛇添足。

serif,sans-serif可以和中文名字一起写,但是中文名字必须在sans-serif之前,否则不生效。

如下:

font-family:"Microsoft Yahei",sans-serif;

如下无效,不能这么写:

font-family:sans-serif,"Microsoft Yahei";

用系统字体的话,就是system-ui

需求和现状:

有的朋友开发中,直接写了:

font-family:"Microsoft Yahei";

这样有问题,假如是mac用户,系统也安装了微软雅黑,岂不是自带的更好看的字体不能用了? 需求是mac用户用自己自带字体,非mac用户用微软雅黑。

可以如下写:

html{
font-family:-apple-system,BlinkMacSystemFont,"Microsoft Yahei";
}

这样就可以达到我们的需求了!

4、font-weight

font-weight字体只有100-900,没有所谓的550,蓝湖等里面的550是不正确的。可能有的字体550在mac中是有效果,但是是不正确的。

那么问题来了,为什么font-weight 设置300,400,500,文字的粗细没有任何变化。只有600或者700才会加粗。感觉浏览器好像不支持这些数值。

实际上,所有这些数值关键字浏览器都是支持的。之所以没有任何粗细变化,是因为系统里面缺乏对应粗细的字体。特别是在桌面端。大部分用户的字体就一个加粗和正常尺寸两种,因此设置300,400,500没有任何变化。推荐OSX系统的苹方,或者“思源黑体”。

有的字体虽然字重丰富,但是不支持font-weight属性加载对应字体文件,这样的话我们只能通过@font-face的方式定义了!

@font-face{
  font-family:'HAOROOMS';
 font-weight:400;
 src:local('HYQihei 40s')
}
@font-face{
  font-family:'HAOROOMS';
 font-weight:500;
 src:local('HYQihei 50s')
}

@font-face{
  font-family:'HAOROOMS';
 font-weight:600;
 src:local('HYQihei 60s')
}

使用的时候直接

font-family:'HAOROOMS';font-weight:400

就可以了。

5、font-style

很多朋友不了解font-style的italic和oblique的区别

italic // 表示当前字体的斜体,假如没有斜体,退而求其次,采用字体倾斜 同oblique

oblique// 单纯的文字倾斜

很多中文没有斜体,因此这两个属性看不出来,假如有斜体的字体,那么这两个属性会比较明显了!

6、font属性

css的font属性,是众多属性的缩写。注意:font-size和font-family是必须的,假如只有一个,那么设置是无效的。

例如:

font:normal 700 14px/25px; // 设置无效

font: 14px "$" // 反而是有效的,认为"$"是一个字体

font属性除了缩写,还有关键词,但是关键词和缩写不能混用。

例如:

.menu{font:menu}

menu代码菜单使用字体。

关键词枚举如下:

caption //活动窗口标题栏使用字体

icon //包含图标内容所使用的字体,例如文件夹名称

menu //菜单使用字体

message-box//消息盒子里面使用的字体

small-caption//调色板标题使用的字体

status-bar//窗体状态栏使用的字体

7、word-break和word-wrap的区别

通常word-break:break-all;和word-wrap:break-word的区别,可以通过字面意思来区分。

break-all,强制换行,不管是不是一个单词,换行折断。

break-word,单词强制换行,一个单词不会截断,整个单词换行。(可能会有换行空白)

8、text-align 两端对齐

之前有篇文章写过https://www.haorooms.com/post/css_liangduan_justify 这个是取巧的写法。下面介绍国际象形文字两端对齐的写法

.justify{
text-align:justify;
text-justify:inter-ideograph;
}

在加上强制单词换行,这样效果更佳!

.justify{
text-align:justify;
text-justify:inter-ideograph;
word-wrap:break-word;
}

上面都可以实现两端对齐。

9、text-transform 字符大小写

我们在输入验证码或者身份证的时候,可以用text-transform,一键转换大小写,体验更好!

input{
text-transform:uppercase;
}

10、first-letter设置美元、人民币单位不同样式。

我们在做网页不就中,经常有价格单位如下

<div class="price">¥699</div>

¥的颜色大小和699是不一样的,通常做法是再多包一层span等。但是我们可以用first-letter来实现样式改变。

.price::first-letter{
 margin-right:5px;
font-size:xx-large;
vertical-align:-2px;
}

就可以实现想要的效果了。

11、div中保留textarea 的\n换行

我们在textarea中回车换行,但是div中不能同步显示换行,因为默认的换行符\n\r div中不识别。

在div中添加如下,就可以保留换行符

white-space: pre-line;

关于文本处理,后面再做补充,今天就暂时到这来。

Tags: cssfont

相关文章: