CSS里字体样式怎么设置

在网页中我们常常对网页中文字设置字体,用font-family这个属性就可以对字体样式进行设置了。那么我们今天就来教大家从html的字体到font-family的设置方法。

原始的html字体设置  

Html的文字字体设置代码:

我是黑体字

登录后复制

CSS字体设置  

CSS 字体属性单词

立即学习“前端免费学习笔记(深入)”;

font-family

CSS字体 css font-family使用方法:

font-family:"设置字体名称";

登录后复制

exp:

CSS运用实例代码:

.div{ font-family:"黑体";}

登录后复制

对应html代码:

我也是黑体字体

登录后复制

说明:以上的css font-family 字体案例,包括了原始的html的字体设置和css 字体设置。

字体选择技巧   

CSS 字体常见我们使用“黑体”、“宋体”此2种中文字体,这是为什么呢,因为网页载入选择字体时候是调用访问者系统文字库的文字字体,如果没有找到字体那将显示默认的网页字体。而每个人安装的操作系统(XP\VISTA\WIN7等系统)默认包括此几种中文字体。这样我们要使用每个人操作系统自带都有的字体作为网页字体,所以不能设置我们单独安装的文字字体。如果我们设置自己单独安装的字体,在自己电脑上会实现设置字体样式,而到其它用户浏览此网页时候此网页内文字字体会大变样。

font-family字体选择

我们在VIP课程中有介绍选择CSS属性及值的技巧。

我们推荐常用字体有:

宋体、黑体、微软雅黑、Arial, Helvetica, sans-serif此4种字体。

font-family总结 

使用css font-family对font-family文字进行字体设置,注意使用常用字体,不要将自己安装的字体设置为网页的字体,这样一来别人浏览你网页的时候没有这样字体造成,文字不美观。通常推荐字体:黑体、宋体、微软雅黑、Arial, Helvetica, sans-serif。

对于字体设置的方法和font-family就这么多了,希望大家能熟练掌握,更多精彩请关注【创想鸟】其它相关文章!

相关阅读:

font-family

font-family

font-family

以上就是CSS里字体样式怎么设置的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3121534.html

(0)
上一篇 2025年3月29日 17:52:18
下一篇 2025年3月29日 17:52:25

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css的cursor属性怎么设置

    很多朋友不是很清楚css的cursor属性怎么设置,今天我们来给大家介绍一下cursor属性,以及他的语法和一个小列子,帮助大家认识cursor属性。 我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变…

    编程技术 2025年3月29日
    100
  • CSS布局有哪些技巧

    css需要怎么布局?css布局的时候需要注意哪些方面?css布局有哪些技巧呢?今天我们就来给大家一一总结一下。如何才能有很好的css布局。 大家都知道从平面设计人员拿来的PS(图片)给CSS重构者重构时,需要对网页美工图片进行分析,只有进行…

    编程技术 2025年3月29日
    100
  • CSS3的box-shadow怎么使用

    我们知道在css3中box-shadow是盒子阴影样式单词,那我们今天就来看一下box-shadow是如何使用的,下面给大家带来一个小案列 盒子阴影样式单词:box-shadow 语法 div{box-shadow:0 0 1px #000…

    编程技术 2025年3月29日
    100
  • CSS3的text-shadow字体阴影怎么使用

    css3的text-shadow样式是设置文阴影效果,原本在css2中就有这个text-shadow,在css3中的文字阴影再次贝应用,那么我们就来看一下需要如何使用text-shadow。 CSS3单词: text-shadow 语法结构…

    编程技术 2025年3月29日
    100
  • Css3动画属性怎么使用

    今天我们来给大家说一下transform动画属性的使用方法和以及使用技巧,使用动画属性需要注意哪些方面呢?下面给大家举一个小列子。 Transform动画属性 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进…

    编程技术 2025年3月29日
    100
  • CSS3怎么做出关门开门效果

    今天给大家带来一段实例代码,怎么用css3做出关门开门的效果,需要用到的属性有border-width,  border-width等,我们一起来看一下。 border-width:边框的宽度    thin 细的             …

    编程技术 2025年3月29日
    100
  • CSS3怎么做出过渡渐变效果

    大家知道在css3里有一个过渡渐变的效果,那么这次就来和大家交流一下过渡渐变使用方法和以及使用技巧,下面给大家举一个小列子。 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 -webkit-gradi…

    编程技术 2025年3月29日
    100
  • CSS3的运动体系怎么做出来

    运动体系是css3的一个很特殊的点,我们能够创建通过运动体系来创建动画,这样就可以在许多网页中取代动画动画,flash动画和动画,对于我们网页有极大的提升 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点,必须规定两项内…

    编程技术 2025年3月29日
    100
  • CSS3怎么做出响应式布局

    今天给大家带来一个用css3做出来的响应式布局的案列,需要的朋友可以拿去借鉴使用,响应式是css3的一个特色,我们熟练掌握后手机端和pc端都可以熟练的使用。 nbsp;html>                            …

    编程技术 2025年3月29日
    100
  • css3的弹性盒怎么做出来

    有时候我们需要在css3里写一个弹性盒子,那么这个代码怎么做出来呢?这就需要用到我们的box-shadow属性了,他可以让盒子在显示的时候产生阴影效果,下面就给大家详细的说明一下 写法:        box-shadow:length l…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论