欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

css教程

前端开发如何使用其他字体(图文)

css教程 我的站长站 2022-09-21 共56人阅读

我们经常看到别人的网站字体非常漂亮,那是因为他们使用了其他的美化字体,合理的使用字体可以让网站看上去,高端优雅。那么如何使用自己下载的字体,我的站长站今天分享给大家整套方法。

1、字体选择

选择字体要注意两点,如果这两点不注意,会适得其反的。

一、大家都知道,字体文件都是几M甚至几十M,对于网站来说,属于非常大的了,用户在打开页面时,加载会非常慢,所以切记体积不能过大。

二、注意字体版权,不要什么字体都拿来用,现在国内的字体商都不讲武德的,随意使用分分钟律师函赔钱。

前端开发如何使用其他字体(图文)

字体是否可以商用可以使用360的字体查询网站:

相关信息
设计师必备-360查字体在线检查本地字体是否能商用
设计师必备-360查字体在线检查本地字体是否能商用

360查字体由360官方出品的在线查询字体是否可商用的工具,主要功能是检查本地已经安装的字体,哪些可以商用,哪些需要购买,避免侵权纠纷。另外还可以搜索字体名称来查询...

2、字体转换

推荐使用可以商用且体积小巧的字体,可以去我的站长站推荐的这个字体网站找找。

前端开发如何使用其他字体(图文)

相关信息
免费商用字体下载大全网站
免费商用字体下载大全网站

分享一个免费商用字体下载大全网站,目前共244款字体可以免费商用字体提供下载,还在不断更新。大家以后就不需要到处一个个找了,直接都是打包下载。最近新增: 站酷仓耳...

找到了合适的字体,我们还需要把字体转换成网页可以使用的格式,直接用下面的工具。

相关信息
分享两款国外在线免费字体转换网站
分享两款国外在线免费字体转换网站

工具介绍很久之前我的站长站分享过一款在线字体转换工具,访问量非常高,今天使用发现竟然收费了,网上找了一圈,发现国内的字体转换网站都要钱。于是谷歌找了下,发现了两...

使用方法:直接上传刚刚下载的字体,转换后,保存到项目目录,等待引用。

3、字体引用

用CSS3的@font-face语法,加载引用下载好的字体文件。

@font-face {
  font-family: "11px"; 
  src: url('https://www.wdzzz.com/fonts.woff2') format('woff2'),
       url('https://www.wdzzz.com/fonts.woff') format('woff'),
       url('https://www.wdzzz.com/fonts.ttf') format('truetype');
}

最后使用字体方法

body{
        font-family: "11px";
}
相关推荐
  • 前端开发
  • 字体
  • CSS选择器
  • 珠峰培训前端开发51G全套视频教程
    珠峰培训前端开发51G全套视频教程

    珠峰前端开发截图视频教程列表NODE和PROMISE.rar9.AXIOS视频.rar8.AJAX.rar7.移动端开发.rar6.事件、事件委托、发布订阅.rar5.定时器、异步、动画库、轮播.rar4. 前三周综合复习.rar3.Dom盒子模...

    视频教程 147 4年前
  • Web前端性能优化方法

    Web前端性能优化主要方法分为2个,资源合并与压缩。主要功能是减少http请求数量,减少请求资源的大小。具体方法HTML压缩:注释也可被压缩,无效代码删除,css 语义合并。JS压缩:无效字符的删除;剔除注释,代码语义的缩减和优化文件合并:文件合并与不合并对比,公共库...

    服务器配置 233 5年前
  • jquery前端框架EasyUI视频教程[Lxe版]打包下载
    jquery前端框架EasyUI视频教程[Lxe版]打包下载

    jquery easyui视频教程简介jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不...

    视频教程 139 4年前
  • 网易云课堂微专业-三个月从入门成为前端工程师
    网易云课堂微专业-三个月从入门成为前端工程师

    课程简介网易杭州一线资深前端开发工程师团队,针对岗位所需技能而设置系统化课程、深入真实产品案例、全程答疑服务、课程实践手工批改,手把手助你成为前端开发工程师!视频课程列表前端微专业学习路...

    视频教程 164 4年前
  • 2019最新WEB前端开发全套视频教程
    2019最新WEB前端开发全套视频教程

    2019最新WEB前端开发全套视频教程课程列表【27】源码+课件+软件【26】拓展课程:Angular5全栈式在线项目【25】拓展课程:Angular5【24】拓展课程:ReactNative电影实战项目【23】拓展课程:React【22】...

    视频教程 147 4年前
  • 帝国CMS首页字体不能改颜色的方法

    帝国CMS_首页字体不能改颜色的方法: <?=DoTitleFont($bqr[titlefont],esub($bqr['title'],150))?>150为标题截取字节

    帝国cms教程 295 10年前
  • WordPress解决加载缓慢教程去除谷歌字体

    Wordpress打开非常缓慢,用浏览器工具查看发现卡在fonts.googleapis.com,这是由于Wordpress后台外链加载了谷歌字体(代码位置在wordpress\wp-includes\script-loader.php第580行),而谷歌服务器大家都知道的原因国内访问困难,严重影响页面加载速度。解决办...

    wordpress教程 242 6年前
  • 在线字体格式转换ttf/otf/eot/woff/woff2格式工具
    在线字体格式转换ttf/otf/eot/woff/woff2格式工具

    在做网站样式时,我们有时找不到自己需要的字体文件,就需要自己需要自己来制作一个,如何制作了?这里给大家推荐一款自己在用的在线字体转换ttf/otf/eot/woff/woff2格式工具。这款在线字体转换工具字体...

    在线工具 13089 5年前
  • 设计师必备-360查字体在线检查本地字体是否能商用
    设计师必备-360查字体在线检查本地字体是否能商用

    360查字体由360官方出品的在线查询字体是否可商用的工具,主要功能是检查本地已经安装的字体,哪些可以商用,哪些需要购买,避免侵权纠纷。另外还可以搜索字体名称来查询搜索字体是否可以商用。360查字...

    在线工具 906 4年前
  • 织梦CMS在线字体转换生成网站模板
    织梦CMS在线字体转换生成网站模板

    织梦CMS内核在线字体转换生成网站模板,可以在线生成转换字体图片,实时查看字体文字效果,可以参考网上的字体下载网站预览功能。模板安装方法把源码上传到根目录,把数据库文件sjk.sql导入到数据库里...

    织梦cms模板 295 3年前
  • CSS如何选择第一个和倒数第一个元素

    前端新手会遇到不知道如何选择列表中的第一个和倒数第一个元素,其实这非常简单。以后所有关于CSS选择的问题,都可以直接搜索CSS选择器的手册,里面有所有的CSS选择解决方法。今天主要介绍CSS如何选择第一个和倒数第一个元素,这里就需要用到:first-child和...

    css教程 40 9个月前
  • CSS伪类选择符大全

    选择符版本简介E:linkCSS1设置超链接a在未被访问前的样式。E:visitedCSS1设置超链接a在其链接地址已被访问过时的样式。E:hoverCSS1/CSS2设置元素在其鼠标悬停时的样式。E:activeCSS1/CSS2设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样...

    css教程 33 1年前
  • 前端开发如何使用其他字体(图文)

    我们经常看到别人的网站字体非常漂亮,那是因为他们使用了其他的美化字体,合理的使用字体可以让网站看上去,高端优雅。那么如何使用自己下载的字体,我的站长站今天分享给大家整套方法。1、字体选择选择字体要注意两点,如果这两点不注意,会适得其反的。一、...

    css教程 56 1年前
  • CSS3修改浏览器滚动条样式

    首先我们写一个简单的小实例来说明下,设置一个长框为300的div,设置下溢出滚动。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&q...

    css教程 46 2年前
  • 为什么bootstrap国内很少人使用

    前言Bootstrap业内知名度很高,在刚刚出来的时候是史无前例的,虽说不少公司在招聘岗位中也要求掌握Bootstrap等框架,但现实项目中应用Bootstrap的并不多。随着更多优秀的前端框架的出现,bootstrap对比后就会发现很多缺点,前端er们自然而然的就放弃了使用bo...

    css教程 678 2年前