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. 工作随笔——CentOS6.4支持rz sz操作

    yum一句话解决: yum -y install lrzsz

  2. Android开发之高效加载Bitmap

    一.概述 在Android开发中,我们经常与Bitmap打交道,而对Bitmap的不恰当的操作经常会导致OOM(Out of Memory).这篇文章我们会介绍如何高效地在Android开发中使用Bi ...

  3. 解决BeanNotOfRequiredTypeException: Bean named 'XXX' must be of type XXX, but was actually of type XXX问题

    Java新手,困扰了一下午. 发布时总是报这样一个错误. org.springframework.beans.factory.BeanCreationException: Error creating ...

  4. Sea.js & Require.js

    Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. 自然直观的代码组织方式:依赖 ...

  5. C# 无法识别的转义序列

    解决这个问题头两种方法:1.加个"\"进行转义:2.在前面加个@ 示例:我要进入D盘下video文件夹中的ysxs文件夹,写法分别为: D:\\video\\ysxs @" ...

  6. Linq---左外联查询

    花了好半天才解决这个问题,终于在网上找到了答案,在此记录备份. 参考连接:http://bbs.csdn.net/topics/390150047 自己总结的如下: 结构就不说了,最后大家自己下源码看 ...

  7. 深入理解C#泛型

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

  8. jQuery应用之（一）使用jQuery选择器（荐）

    如上文(地址)jQuery预先的javascript的编程,提供了计划所有css3下的标准选择器,开发者可以利用这些选择器轻松选择各种元素,供javascript使用. 重要的是jQuery对这些选择 ...

  9. ECMAScript —— 学习笔记（思维导图版）

    导图

  10. new-nav-js

    'use strict';define([ 'jquery'], function($) { var nav = { init : function() { $("#burger-menu& ...