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. SDAccel-FPGA将带来至多25倍单位功耗性能提升

    很久没有看FPGA了,本来想继续学习HLS,就上Xilinx的网站看了看.结果发现了SDx 开发环境,很新的一个东西.由于我对这方面了解不多,本篇博文仅仅只是资料的整合和介绍. 1.SDx开发环境 X ...

  2. mui slider 改变默认index

    mui('class').slider().gotoItem(1,0) 目前已知问题,在class类名对应的dom元素是隐藏的时候初始化设置将报错,因为:  如果display取值是none,也就是不 ...

  3. 一个基于.NET平台的自动化/压力测试系统设计简述

    AutoTest系统设计概述 AutoTest是一个基于.NET平台实现的自动化/压力测试的系统,可独立运行于windows平台下,支持分布式部署,不需要其他配置或编译器的支持.(本质是一个基于协议的 ...

  4. inconsistent line count calculation in projection snapshot

    1.现象 在vs2013中,按Ctrl + E + D格式化.cshtml代码,vs2013系统崩溃.报:inconsistent line count calculation in projecti ...

  5. 服务器端解决JS跨域调用问题

    一. 使用JSONp方式调用 不做详细讲解,可以参考jq文档 二. 服务端配置 修改Web.config 文件 <system.webServer> <modules runAllM ...

  6. [BZOJ1211][HNOI2004]树的计数(Prufer序列)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1211 分析: 关于无根树的组合数学问题肯定想到Prufer序列,类似bzoj1005那 ...

  7. [工具类]文件或文件夹xx已存在,则重命名为xx(n)(2)

    写在前面 最近一直在弄文件传输组件,其中一个功能就是,在接收端接收文件时,如果文件已经存在了,则对其进行文件名+索引的方式进行自动重命名,之前也写个类似的工具类,总感觉代码太冗余,每回头想想,总觉得心 ...

  8. 深入理解C#泛型

    前面两篇文章介绍了C#泛型的基本知识和特性,下面我们看看泛型是怎么工作的,了解一下泛型内部机制. 泛型内部机制 泛型拥有类型参数,通过类型参数可以提供"参数化"的类型,事实上,泛型 ...

  9. “耐撕”团队 2016.04.07 站立会议

    1. 时间: 20:00--20:15  共计20分钟. 2. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:ht ...

  10. JavaScript、jQuery、AJAX、JSON 解释