​css如何自定义字体?html中的文本字体样式介绍

css如何自定义字体的你知道吗?还有css样式设置字体样式的介绍,比如介绍了字体的大小,还有字体的粗细设置,这篇文章教大家如何用css样式来做这些内容,现在让我们来看看文章吧

一、首先呢,我们介绍的是如何用css样式来自定义字体,一起来看看吧:

在这里我们介绍一个css样式中的属性:

font-family:定义文本的字体系列。也叫字体家族,通用的有五种:serif,sans-serif,monospace,cursive,fantasy.

当然还可以找特定的字体。我们在自己的电脑上找自己电脑上有的字体,然后把名字复制进来也能设置,当然如果用户端没有安装这字体,那这字体就没用了。显示的是用户端的默认的字体了。(想看更多就来PHP中文网 css视频教程)

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

我们来看个文本字体的实例:

.you_1{font-family:serif}.you_2{font-family:sans-serif}.you_3{font-family:monospace}.you_4{font-family:cursive}.you_5{font-family:fantasy}

这是PHP中文网,里面有很多你要的视频教程,网址是www.php.cn,这里是PHP中文网;

这是PHP中文网,里面有很多你要的视频教程,网址是www.php.cn,这里是PHP中文网;

这是PHP中文网,里面有很多你要的视频教程,网址是www.php.cn,这里是PHP中文网;

这是PHP中文网,里面有很多你要的视频教程,网址是www.php.cn,这里是PHP中文网;

这是PHP中文网,里面有很多你要的视频教程,网址是www.php.cn,这里是PHP中文网;

这是PHP中文网,里面有很多你要的视频教程,网址是www.php.cn,这里是PHP中文网;

这里给上述的五个段落都给了不一样的字体样式,我们现在来看看浏览器中显示的结果:

tuyi.png

如图,最后一个没有任何的设置,就是设置了前面五个字体,看上去是不是很明显,这是font-family中的五种常用字体,基本上所有的电脑都有这些字体,不需要大家担心在别人的电脑中显示不出来。我们自定义的字体说完了。

二、现在说说我们的文本字体样式,比如改变大小啊,字体加粗的介绍。让我们一起来看下吧:

font-weight:用来设置文本粗细,有三种:normal,bold粗体,参数100~900,定义文本大小的

font-size:属性用来设置文本的大小的。有px,em,%.默认1em等于16像素点。

这又是css样式中两种字体的介绍了,现在我们让它们在一个实例中出现

来看看关于字体样式设置的实例吧:

.you_1{font-weight:600}.you_2{font-size:40px}

这是PHP中文网,里面有很多你要的视频教程,网址是www.php.cn,这里是PHP中文网;

这是PHP中文网,里面有很多你要的视频教程,网址是www.php.cn,这里是PHP中文网;

这是PHP中文网,里面有很多你要的视频教程,网址是www.php.cn,这里是PHP中文网;

大家很清楚的能看到,这代码第一个设置了文本粗细的参数,还有一个设置了文本大小的px参数。现在我们来看看在浏览器中显示的效果是什么吧:

tuer.png

这个有点设置大了。不过没关系,这就肯定能看清楚的。不会有人说看不清楚,一个是设置粗细的,一个是设置大小的,应该不会有人分不清哪个是设置大小和哪个是设置粗细的吧。

好了,这篇文章到这就结束了,介绍了css样式如何设置字体,还有文本字体样式的设计。有问题的可以在下方留言提问。

【小编推荐】

html input标签的属性有哪些?input标签的用法总结(附实例)

html中的label标签怎么设置高度?label标签的使用方法介绍

以上就是​css如何自定义字体?html中的文本字体样式介绍的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 02:18:32
下一篇 2025年12月24日 02:18:55

相关推荐

  • html中的字符间距怎么设置?css样式设置文本对齐方式总结

    我们经常用的html字符间距总是不好设置,html的文本对齐方式也不会设置,现在这篇文章就来帮助大家了,这里有关于html 字符间距的调整,还有文本的对齐方式设置,现在让我们来看看这篇文章吧 首先我们先来了解一下html中的字符间距是怎么设置的: 我们先了解一下我们正常显示的文本是什么样的: 这样是…

    2025年12月24日 好文分享
    000
  • css选择器是什么?css选择器有哪些类型?

    css选择器在css的学习中无疑是十分重要的,所以,什么是css选择器?css选择器有哪些类型?这是我们必须要掌握的,本篇文章将给大家来介绍关于css选择器的基本定义,以及css选择器有哪些类型。 我们话不多说,直接进入正题~~ css选择器是什么? 在百度百科中,我们可以看到css选择器的基本定义…

    2025年12月24日 好文分享
    000
  • css阴影效果:css边框阴影如何设置?

    在网页设计过程中,我们经常需要在网页中设置一些特殊的效果,让设计出来的网页显得更加美观,本篇文章将要给大家介绍如何通过css给边框设置阴影效果,css阴影效果可能会让设计出来框更具有立体感,话不多说,让我们来具体看一看css边框阴影效果的设置方法。 我们在设置边框阴影时,必不可少的一个属性是box-…

    2025年12月24日
    000
  • CSS实现鼠标经过图片上图片等比缩放效果(代码实例)

    本篇文章给大家带来的内容是关于如何使用CSS实现鼠标经过图片上图片缩放(缓慢变化,有过渡效果,缩放的过程是有动画过渡的)效果,主要用到CSS transform属性,css3 transition属性,以下实现效果和具体的实现方法,希望对你有所帮助。 先来看下效果预览 代码解读 HTML部分的代码 …

    2025年12月24日
    000
  • 如何利用css来设置文本的背景颜色?css设置背景颜色代码详解

    css设置文本的背景颜色代码你知道吗?这里有详细的css实现背景颜色的完整实例,让你更容易理解这些属性的含义到底是什么,现在就让我们一起来看下吧 首先我们先来看看这个代码: background-color:属性设置元素的背景颜色(值有三种:color_name:(英文颜色名)hex_name:#0…

    2025年12月24日 好文分享
    000
  • ​css怎么设置无序列表?css的列表样式总结

    css怎么样设置无序列表的样式你知道吗?这里有无序列表的详细应用,去掉这些图标之类的,还介绍了去掉小圆点给添加的图片的介绍,大家可以自己试试看。现在就让我们一起来看看这篇文章吧 首先我们先来看看无序列表: 我们都知道无序列表通常都是使用小圆点代替的,但是有些时候用小圆点不好看,为了增加美观性,在cs…

    2025年12月24日
    000
  • 如何使用纯CSS实现方块跳跃的动画(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,容器…

    2025年12月24日
    000
  • 如何使用纯CSS 实现类似于旗帜飘扬动画效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css 实现类似于旗帜飘扬动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 d…

    2025年12月24日
    000
  • 如何使用纯CSS实现一个转动的自行车车轮的动画效果

    本篇文章给大家带来的内容是关于如何使用纯css实现一个转动的自行车车轮的动画效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 do…

    2025年12月24日
    000
  • 如何使用纯CSS实现小球跳跃台阶的动画效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 d…

    2025年12月24日
    000
  • 如何使用纯CSS实现单元素麦当劳的Logo(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现单元素麦当劳的logo(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 d…

    2025年12月24日
    000
  • 如何使用纯CSS实现Windows启动界面的动画效果

    本篇文章给大家带来的内容是关于如何使用纯css实现windows启动界面的动画效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 d…

    2025年12月24日
    000
  • 如何使用纯CSS实现蝴蝶标本的展示框效果

    本篇文章给大家带来的内容是关于如何使用纯css实现蝴蝶标本的展示框效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/front-end-dail…

    2025年12月24日
    000
  • 如何使用纯CSS实现一个足球场的俯视图(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现一个足球场的俯视图(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…

    2025年12月24日
    000
  • 如何使用纯CSS实现太阳和地球和月亮的运转模型动画

    这篇文章给大家带来的内容是关于如何使用纯css实现太阳和地球和月亮的运转模型动画 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义dom…

    2025年12月24日
    000
  • html中的字体颜色怎么设置?css设置字体颜色方法介绍

    在html中我们经常要用到css样式来美化html标签的一些不足之处,今天我们就来说说如何用css的基本样式来改变文本的颜色,文章通俗易懂,希望大家看完后能练习练习加深印象。 一、首先我们先给大家看个html字体的基础代码: PHP中文网这里是PHP中文网html这里是PHP中文网css这里是PHP…

    2025年12月24日
    000
  • css块级元素的定义是什么?css块级元素有哪些?

    css块级元素是什么?对于一些刚学习css的朋友们来说,这个问题可能不太了解,那么,接下来这篇文章就来给大家介绍一下关于css块级元素的定义,以及css块级元素有哪些? css块级元素的定义 根据W3C上的解释,就是说block(块级)元素是独占一行显示的。它的兄弟元素必定不会与其在同一行中(除非脱…

    好文分享 2025年12月24日
    000
  • css行内元素有哪些?css块级元素和行内元素的区别

    很多css初学者在学习到css行内元素和css块级元素的时候,可能会容易搞混,那么,本篇文章就来给大家讲解一下css行内元素和块级元素有哪些?以及css块级元素和css行内元素的区别。 在上一篇文章css块级元素的定义是什么?css块级元素有哪些?中我们单独介绍css的块级(block)元素,所以在…

    2025年12月24日
    000
  • 如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,容…

    2025年12月24日
    000
  • CSS常见兼容性问题及解决方法的总结

    本篇文章给大家带来的内容是关于CSS常见兼容性问题及解决方法的总结 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。 这里谈到的浏览器,主要指IE6/IE7/IE… FireF…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信