首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Roboto Font face仅下载常规字体

要在网页中仅下载Roboto字体的常规字体(即400粗细),您可以使用CSS的@font-face规则,并指定font-weight属性为400。以下是一个示例代码:

代码语言:javascript
复制
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Regular.woff2') format('woff2'),
       url('Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

在这个示例中,我们定义了一个名为Roboto的字体家族,并指定了其常规字体(400粗细)的URL。这样,当您在CSS中应用font-family: 'Roboto';时,浏览器将仅下载并使用Roboto的常规字体。

请确保将url('Roboto-Regular.woff2')url('Roboto-Regular.woff')替换为实际的字体文件路径。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体,又不会下载太大的字体文件,来装饰我们网站的部分呢...在CSS2.0 规范中有一个东西,@font-face(IE4.0就存在),后来在 CSS2.1 草案中又被删掉。后来又被纳入到CSS3草案当中。...我们可以使用该属性进行自定义字体的设置,换句话说,使用它之后,我们就能够在网络中自由的使用自定义字体,先来看其基本的语法: @font-face { font-family: 字体名为“STXINGKA”),为所有的字体进行这样的设置的作用是:当用户本地已经下载了同样字体的时候,可以节约网上下载的成本。...doctype html> H5course @font-face { font-family

7K50

pygame系列_font游戏字体_源码下载

在pygame游戏开发中,一个友好的UI中,漂亮的字体是少不了的 今天就给大伙带来有关pygame中字体的一些介绍说明 首先我们得判断一下我们的pygame中有没有font这个模块 1 if not pygame.font...: print('Warning, fonts disabled') 如果有的话才可以进行接下来的操作:-) 我们可以这样使用pygame中的字体: 1 tork_font = pygame.font.Font...('data\\font\\TORK____.ttf', 20) 当然也可以使用系统中自带的字体: 1 my_font = pygame.font.SysFont("arial", 10) 参数一:字体名称...如果定义好了字体,那么我们应该把字体显示到suiface上面去,我们应该这样操作: 1 position = tork_font.render('Hello,I\'m Hongten', True, (...screen.blit(position, (0, 480)) 62 screen.blit(frog, (frog_x, frog_y)) 63 pygame.display.update() 源码下载

1.2K20
  • 字体更改

    更改字体 更改字体主要通过引入css实现,具体的代码如下所示: @font-face{ font-family: '字体名字'; src: url('/font/文件名字.ttf') format("...truetype"); } body { font-family: '字体名字'; } 其中@font-face相当于创建一个字体族,然后下边body部分是在应用字体族,那个名字其实就是在前边创建的字体的名字...通过在网络上的查找,我首先选择使用的是Robot字体,这个字体族写的英文字体相当漂亮: Robot字体本身是一款非常漂亮的英文字体,Roboto-Medium 字体被广泛用于广告、海报、画册、...最后修改完成后的css代码为: @font-face { font-family: 'Robot'; src: url('/font/Roboto-Medium.ttf') format...另外考虑到一般情况下下载的字体文件为otf或者ttf格式,这两种格式的字体文件都比较大,为了加载方便一般会转化为woff格式,配置过程中我用到的两个转换网站是: ttf转woff otf转woff

    3.6K30

    突破限制,CSS font-variation 可变字体的魅力

    从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。我们只需通过CSS与一行 @font-face 引用,即可获取包含在这个单一文件中的各种字体变体。...而如果我们想引入一个字体家族(譬如 Roboto 字体族),它可能包含了 “Roboto Regular”(常规字重)、“Roboto Bold”(粗体),或是 “Roboto Bold Italic”...当然,这个文件可能比常规的单个字体文件大一些。...加载可变字体的语法与其他 web 字体非常相似,但有一些显著的差异,这些差异是通过对现代浏览器中可用的传统 @font-face 语法的升级提供的。...还是利用上述的可变字体,我们利用 font-variation-settings 实现一个字体粗细的变化的动画: Anybody @font-face { font-family: 'Anybody

    1.2K10

    你确定!?这些基础绘图技能你全都掌握了!?

    在介绍完这篇关于Python-Matplotlib基础绘图属性后(这些绘图细节(字体、线类型、标记等)让你的论文配图耳目一新),有很多小伙伴私信能不能详细介绍下关于R-ggplot2的类似介绍?...那么今天的这篇推文小编就系统介绍一下,详细内容如下: 线类型(Line type) 点形状(Point Shape) 文本(font face)属性 线类型(Line type) R-ggplot2...更多关于ggstar::geom_star()绘图函数可参考:R-ggstar[1] 文本属性 「fontface」: 这里我们着重介绍文本的字型(fontface),R-ggplot2的字型主要分为:常规...Example Of ggplot2 fontface 「Justification」:对齐(左、右、居中) 字体对齐在添加文本图层中经常遇到,ggplot2中有水平(horizontal) 和垂直(vertical...Example Of ggplot2 font justification 以上就是今天小编对于R-ggplot2绘图中基本属性(线、点、字体)的一个详细介绍,更多详细内容大家可参考:ggplot2官网

    78720

    Fonts最佳实践

    字体加载 在深入探讨字体加载的最佳实践之前,重要的是要了解@font-face是如何工作的,以及它是如何影响字体加载的。 @font-face声明是使用任何网络字体的一个重要部分。...woff2"); } 一个常见的误解是,当遇到@font-face声明时,就会请求一种字体——事实并非如此。...就其本身而言,@font-face声明并不触发字体下载。相反,只有当一个字体被页面上使用的样式所引用时,才会被下载。例如,像这样。...最佳做法 选择一个合适的字体显示策略 font-display告诉浏览器,当相关的网络字体没有加载时,它应该如何进行文本渲染。它是根据每个font-face定义的。...@font-face { font-family: Roboto, Sans-Serif src: url(/fonts/roboto.woff) format('woff'), font-display

    3.1K72

    21. 精读《Web fonts: when you need them, when you don’t》

    (好像还没这么苛求吧……微软雅黑好看,安卓上的Roboto也很不错啊,Roboto这种字体还针对移动设备有优化,何乐而不为。) 用了Web Font你会更开心吗?...具体表现是采用了Web Font的文案会存在闪动,这个的根本原因在于相比于系统字体,Web Font最大的弊端在于它是异步加载的,你没有办法避免下载它所用的时间。...不过好在,有一个font-display的属性,可以在声明@font-face的时候配合使用。...因为通常加载字体是在CSS中的@font-face被读到的时候才去加载的,那么就会出现先加载CSS,后加载字体的情况。...如果利用link预加载,那么在CSS中的@font-face被读到前就已经开始加载了,那么字体加载和CSS加载就可以同时加载,提升速度。

    54420

    web字体规范

    界限划定 首先我们的前提是针对常规正文,大篇幅文本的字体,而非标题、活动页、特效页的部分特殊字。...这部分设计师可以大胆去采用,但是一个项目中的正文也是建议控制在一种常规字体,建议body里定义默认正文字体列表,而不是每个部分都需要单独查看字体定义字体。..., Arial, sans-serif;} @font-face实现webfont(不推荐) @font-face 介绍 @font-face是css中的一个功能模块,用于实现网页字体多样性(设计者可随意指定字体...@font-face文件 由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格。...允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染,存储在临时安装文件夹下。

    2.8K40

    Iconfont在教育平台的实践

    教育平台项目除了常规的web性能优化外,图片资源站到了流量的70%+,因此图片的性能优化是个重中之重。除了常规的图片优化外,课程封面和机构上传的图片采用了webp格式,之前已介绍过,不再赘述。...也不例外 有一定的虚边,这个跟字体本身有关系,所有的文字字体渲染都有一定的虚边 兼容问题 网上和iconfont.cn给出的推荐写法是: [@font-face](/user/font-face) {...](/user/font-face) { font-family: 'iconfont'; url('fonts/webfont.eot?...,而其他浏览器则只下载自己认识的字体文件。...遗留问题 IE8中,如果字体文件加载失败,则整个页面空白,虽然其他资源正常加载,逻辑正常运行。 iOS、Andriod中,字体文件或阻碍其他资源下载。

    1.2K20

    Iconfont在教育平台的实践

    教育平台项目除了常规的web性能优化外,图片资源站到了流量的70%+,因此图片的性能优化是个重中之重。除了常规的图片优化外,课程封面和机构上传的图片采用了webp格式,之前已介绍过,不再赘述。...也不例外 有一定的虚边,这个跟字体本身有关系,所有的文字字体渲染都有一定的虚边 兼容问题 网上和iconfont.cn给出的推荐写法是: [@font-face](/user/font-face) {...](/user/font-face) { font-family: 'iconfont'; url('fonts/webfont.eot?...,而其他浏览器则只下载自己认识的字体文件。...遗留问题 IE8中,如果字体文件加载失败,则整个页面空白,虽然其他资源正常加载,逻辑正常运行。 iOS、Andriod中,字体文件或阻碍其他资源下载。

    1.6K70

    Web 字体 font-family 再探秘

    之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family。 该篇文章基本没有太多移动端的字体选择及分析。...,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe...默认使用特定操作系统的系统字体可以提高性能,因为浏览器或者 webview 不必去下载任何字体文件,而是使用已有的字体文件。 ...Roboto Roboto 是为 Android 操作系统设计的一个无衬线字体家族。Google 描述该字体为“现代的、但平易近人”和“有感情”的。...ui,在 Windows 及 Windows Phone 上选取系统默认字体 Roboto,面向 Android 和一些新版的的 Chrome OS Helvetica,Arial,在针对不同操作系统不同平台设定采用默认系统字体后

    2.5K10
    领券