css中的font-family属性可以让我们自定义字体。在页面前端,宋体已经明日黄花,号称最贵中文字体的微软雅黑大行其道。英文字体万年不变,依然还是"arial","verdana","sans serif"这些字体。
在做项目期间,碰到一个问题。看下面的截图。
 
 
箭头标记的地方需要对齐。这里就带来一个问题了,这里的标题,有的是两个字,有的是三个字,有的是四个字,怎么办呢?居中对齐,两端对齐?单纯的css控制,会产生兼容问题。一时无头绪,后面看了下京东的页面,发现别人在这个标题处,使用了“simsun”字体。使用这个字体的时候,两个 占据的宽度和一个汉字占据的宽度相等。
这里就带了一个疑问了,如果字体设置为其它的可不可以?
好,说试就试。
当字体为“宋体”,"sans serif"的时候是OK的,为“tahoma”,"arial","verdana"的时候是不OK的。
从这里我们就可以知道,使用不同的字体,会对文字,特别是特殊符号造成影响。
这也就是我们在项目中使用到“*,¥”这样的字符时,通常为其设置的都是“arial"或"verdana"这些字体。
 
 

font-family属性与字体对齐的更多相关文章

  1. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  2. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  3. python全栈开发day40-浮动的四大特性,浮动带来的问题和解决问题,文本属性、字体属性和颜色介绍

    一.昨日内容总结 1.盒模型及其属性 2.文本级标签.行内块.块级标签 3.继承性.层叠性.权重 4.浮动四大特性 # 浮动元素脱离标准文档流 # 贴靠 # 字围效果 # 自动收缩或紧缩 二.今日内容 ...

  4. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  5. 文本属性和字体属性,超链接导航栏案例 background

    文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...

  6. css 01-CSS属性:字体属性和文本属性

    01-CSS属性:字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 #CSS的单位 html中的单位只有一种,那就是像素 ...

  7. CSS font 复合属性的顺序

    CSS 参考手册 实例 在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20 ...

  8. 【转载】CSS font关键字属性值的简单研究

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  9. css 文本属性和字体属性

    1.将浮动居中 这需要三个盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. [Android] 安卓模拟器临时文件相关问题

    今天生产环境有台机器的硬盘满了,排查发现我的模块在/tmp/android-username目录下留了一堆形如“emulator-1tpH5l”的文件,占用了很大的空间. 这个模块会反复启停好几个安卓 ...

  2. 《深入理解计算机系统》深入实践之——vim深入研究

    vim 用户手册中,大部分的例子都是在讲 vim 如何高效编写代码,由此可见,vim 是一款面向于程序员的多功能编辑器,即使某些功能 vim 无法直接完成,借助其丰富的插件资源,必定可以达成目标,这就 ...

  3. I2C和LCD信号干扰的解决:硬件工程师都硬不起来,让软件工程师硬着头上

    DEMO4,LCD的clk干扰I2C,I2C无法通信. 把排针压下,去掉LCD的CLK,恢复正常.     过程: 直接跳线I2C,没问题.两排针插到一起就无法通信. 一个个的排针去除,最终找到LCD ...

  4. 推荐一个 angular 图像加载插件

    推荐一个简单的 Angular 图片加载插件:vgSrc,插件根据图片资源的不同加载状态,显示不同图片,亲测兼容IE-8. 使用 推荐使用 bower 加载: bash bower install v ...

  5. [BZOJ2038]小Z的袜子(莫队算法)

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2038 分析:莫队算法 莫队算法是一种思想…… 处理问题:不带修改的区间询问 使用要求:[l-1 ...

  6. chromiun 学习《一》

    众所周知,Chrome是建立在开源的Chromium项目上的. 而且不得不说,学习并分析开源项目的代码对一个程序员的提高确实蛮大的.这篇博文我会记录一下学习过程中我遇到的一些问题,并分享学习中我所参考 ...

  7. Mac上git的安装配置与使用简述

    Mac下git搭建及使用 之前就只是经常在GitHubs上下载代码,也没注意怎么上传项目.一开始对git都没什么了解花了几个小时去小补了下知识.如果有需要可以转去这里学习:[GIT使用简易指南] (h ...

  8. 使用nginx绑定域名,代理gitlab

    默认情况下,gitlab通过自带的unicorn来充当web页面的,不用nginx也可以,这里我们使用nginx代理vim /etc/yum.reos.d/nginx.repo # 编辑nginx.r ...

  9. JS模式-基本的单例模式

    //singleton var SingletonTester = (function(){ function Singleton(options){ options = options || {}; ...

  10. JS:采摘自JS精粹

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...