精华内容
下载资源
问答
  • 在开发中发现在mac上数字0和1所占的宽度不一样,网上查询需要用到等宽字体,但是浏览器支持的默认几种等宽字体中文很难看,随即引入谷歌的字体进行渲染。 最近在写一个移动端的web项目,designer设计的页面效果图...

    在网站中使用谷歌“ROBOTO”字体(解决ios数字1和0大小不等宽问题)

    在开发中发现在mac上数字0和1所占的宽度不一样,网上查询需要用到等宽字体,但是浏览器支持的默认几种等宽字体中文很难看,随即引入谷歌的字体进行渲染。

    最近在写一个移动端的web项目,designer设计的页面效果图就是使用Google Roboto Font。The Roboto Font 是Google为Android 4.0 Ice-Cream Sandwich platform而设计的,是一个新的san-serif字集。

    在css中,我直接使用了如下的代码:

    body{font-family:'Roboto',Roboto Lt;}
    

    页面测试时,Roboto字体在Android Platform下面是渲染出来了,但是在iphone 5s下面则出现字体不生效的情况。

    我直接按照Google官方的quick example code来调用这个Google的在线字体库,但是发现还是没有效果,同时也在stackoverflow发了问题。

    后来,在Google Search Engine中找到了这篇文章:How to Use The Google’s Roboto Font Everywhere

    你可以直接看上面链接中的文章,我的解决办法就是按照文中的思路来实现的。如果你看不懂英文,那么你可以看看我下面的中文解决步骤。

    1. 下载字体包,链接是 FontSquirrel Roboto font page。

    2. 在打开的页面中,选择“Webfont kit”,然后你点击打开的选项页下面的"DOWNLOAD@FONT-FACE KIT"进行压缩包下载。

    3. 下载完成之后,解压到当前文件夹,你可以看到解压出来的web fonts目录,打开该目录你会发现里面很多都是Roboto的各种字体。你直接选择一个你想要用在web size的上传到你的网站相关目录下面即可,当然,你还必须要添加一段css3 @font-face代码来进行嵌入扩展的字体到你的站点。代码如下:(注意,src path必须是根据你个人的具体情况来定,不是下面写死的代码。)

    4. [复制代码](javascript:void(0)?

       1 @font-face {
       2     font-family: 'Roboto';
       3     src: url('Roboto-Regular-webfont.eot');
       4     src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       5          url('Roboto-Regular-webfont.woff') format('woff'),
       6          url('Roboto-Regular-webfont.ttf') format('truetype'),
       7          url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
       8     font-weight: normal;
       9     font-style: normal;
      10 }
      11 
      12 //假如你想要扩展更多的字体库,那么你就可以按照上面代码来进行引用就行。
      

    官方示例

    Installing Webfonts

    Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

    1. Upload your webfonts

    You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

    2. Include the webfont stylesheet

    A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

    @font-face{ 
    	font-family: 'MyWebFont';
    	src: url('WebFont.eot');
    	src: url('WebFont.eot?iefix') format('eot'),
    	     url('WebFont.woff') format('woff'),
    	     url('WebFont.ttf') format('truetype'),
    	     url('WebFont.svg#webfont') format('svg');
    }
    

    We’ve already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
    

    3. Modify your own stylesheet

    To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called “font-family.” The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the “font-family” property, inside the selector you want to change. For example:

    p { font-family: 'MyWebFont', Arial, sans-serif; }
    

    4. Test

    Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren’t loading in a particular browser.

    Troubleshooting Font-Face Problems

    Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

    Fonts not showing in any browser

    This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you’ve confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

    Fonts not loading in iPhone or iPad

    The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to “image/svg+xml” in the server settings. Follow these instructions from Microsoft if you need help.

    Fonts not loading in Firefox

    The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn’t it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

    Fonts not loading in IE

    Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

    Fonts not loading in IE9

    IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

    参考:https://www.cnblogs.com/shuman/p/3803608.html

    展开全文
  • 安装中文字体相关参考如下几个网页:安装如下字体:sudo pacman -S ttf-roboto noto-fonts ttf-dejavu# 文泉驿sudo pacman -S wqy-bitmapfont wqy-microhei wqy-microhei-lite wqy-zenhei# 思源字体sudo pacman -S ...

    安装中文字体相关

    参考如下几个网页:

    安装如下字体:

    sudo pacman -S ttf-roboto noto-fonts ttf-dejavu

    # 文泉驿

    sudo pacman -S wqy-bitmapfont wqy-microhei wqy-microhei-lite wqy-zenhei

    # 思源字体

    sudo pacman -S noto-fonts-cjk adobe-source-han-sans-cn-fonts adobe-source-han-serif-cn-fonts

    编辑配置文件~/.config/fontconfig/fonts.conf,重新启动

    Manjaro Font Config

    false

    true

    true

    false

    serif

    Noto Serif

    sans-serif

    Roboto

    monospace

    DejaVu Sans Mono

    zh

    serif

    Source Han Serif CN

    zh

    sans-serif

    Source Han Sans CN

    zh

    monospace

    Noto Sans Mono CJK SC

    SimHei

    Source Han Sans CN

    SimSun

    Source Han Serif CN

    SimSun-18030

    Source Han Serif CN

    conf.d

    /var/cache/fontconfig

    fontconfig

    ~/.fontconfig

    30

    展开全文
  • 记录的使用material ui中字体的使用 不根据底线对齐 原始样式 秋季拍卖会: .MuiTypography-h6 { font-size: 1.25rem; font-family: “Roboto”, “Helvetica”, “Arial”, sans-serif; font-weight: 500; line-...

    记录的使用material ui中字体的使用

    在这里插入图片描述
    不根据底线对齐
    原始样式
    秋季拍卖会:
    .MuiTypography-h6 {
    font-size: 1.25rem;
    font-family: “Roboto”, “Helvetica”, “Arial”, sans-serif;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.0075em;
    }

    总成交金额:
    MuiTypography-body2 {
    font-size: 0.875rem;
    font-family: “Roboto”, “Helvetica”, “Arial”, sans-serif;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: 0.01071em;
    }

    把秋季拍卖会的样式line-height去掉或者添加,或者在外部样式添加 line-height: inherit;即可

    工作上遇到的小问题

    还是菜鸟,原理以后在探讨

    展开全文
  • app界面设计字体规范

    2017-05-18 13:42:00
    通过对不同类型的app进行总结,总结出app...2.Android:英文字体:Roboto中文字体:Noto 二、案例分析 1.以今日头条界面为例,导航主标题字号为40px,正文标题为36px,辅助性说明文字为24px,小字(视频长短,...

    通过对不同类型的app进行总结,总结出app的字体规范。

    一、字体选择

    1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方。英文字体是: San Francisco

    2.Android:英文字体:Roboto,中文字体:Noto

    二、案例分析

    1.以今日头条界面为例,导航主标题字号为40px,正文标题为36px,辅助性说明文字为24px,小字(视频长短,标题栏按钮名)为20px,头像名为28px。字体大小代表的层级关系一目了然。

    2.正文部分,导航栏标题文字为36px,内容标题为48px,正文为36px,小字为22-20px。

    (因app性质不同,今日头条作为阅读类型的app,会更注重文本的阅读便捷性。所以字号选择上会偏大一些。)

    3.再以微信为例,导航栏标题文字为36px,内容标题文字为34px,内容为28px,辅助性说明文字为24px。

    4.最后以豆果美食为例,豆果美食是我认为界面阅读很漂亮的一个app界面设计。文字阅读给人一种很精致舒服的感觉。同阅读类型的新闻app和工具类型的app在字号选择上相比,它的文字选择的要稍小一些。如导航栏的字号为30px,页面最大字号为34px(分类标题),其次是32px,28px,24px,20px

    这是豆果美食的内容详情页,在正文标题用到了36px,正文内容为32px,次要文字为28px,其次是24px,22px,20px。

    三、总结

    总结如图,选择字体大小时应根据app的性质,风格,定位来进行选择,应通过文字大小表现出内容的轻重,层级划分,做到层级关系明显。除了对字体进行字号大小的区别,还可对文字进行样式(加重字体)和颜色的区分。

    转载于:https://www.cnblogs.com/hytj/p/6872932.html

    展开全文
  • App界面设计规范-字体规范

    千次阅读 2018-04-18 22:45:00
    通过对不同类型的app进行总结,总结出...2.Android:英文字体:Roboto中文字体:Noto   二、案例分析 1.以今日头条界面为例,导航主标题字号为40px,正文标题为36px,辅助性说明文字为24px,小字(视频长短...
  • 中文字体是DroidSansFallback.ttf 4.0.X系统英文字体是Roboto-Regular.ttf 2.3.X系统英文字体是DroidSans.ttf 而在网络上流传的都是只有中文的字体,没有英文的替换,十分不协调 自己也是蛮喜欢这个字体的,...
  • 苹果默认字体

    千次阅读 2016-02-18 09:57:12
    中文:iOS苹方黑 英文:System San Francisco苹果iOS8及之前 中文:黑体简 STHeiti 英文: Helvetica Ne…安卓Material Design 中文:Noto或思源黑体 英文:Roboto安卓4.0以上 中文:方正兰亭黑简体 方正兰亭...
  • 下面是演示效果,一个是自定义的中文字体一个是英文字体。 krpano(HTML5 viewer)中使用自定义字体样式 第一步:下载字体 假设我们想要安卓字体Roboto Regular。点连接下载字体。我们将字体压缩包解压,将TFF...
  • android英文用的是什么字体

    千次阅读 2013-03-29 14:00:06
    DroidSansFallback 字体是 Google 为手机"Android"内建的系统字体,支持繁体中文、简体中文、韩文、日文。支持4种文字的同时,DroidSansFallback.ttf 字体文件的体积仅有 3.04MB大小,效果类似于微软雅黑字体,而且...
  • 来源:壹念视觉字 体Typography中文字体:Source Han Sans / Noto英文字体:Roboto元 素字 重字 号行 距字间距App barMedium20sp--ButtonsMedium15sp-10HeadlineRegular24sp34dp0TitleMedium21sp-5SubheadingRegular...
  • /system/fonts/下: ... DroidSansFallback.ttf (中文字体Roboto-Regular.ttf (系统英文数字文件常规体) 实现思路: 下载好(一般就需要下面两个字体文件,如果不需要切换字母数字,只需要 DroidSa...
  • 最标准的系统字体规范font-family 注意系统默认字体和浏览器默认字体这个差别。.../*西文*/-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial, /*中文*/Pi...
  • 关于python kivy中文乱码的解决办法

    千次阅读 2018-11-30 13:32:12
    一、在python中运行,中文乱码 1、 将中文字体放入/usr/local/lib/python3.5/dist-packages/kivy/data/...'data/fonts/Roboto-Regular.ttf' 修改为 'data/fonts/DroidSansFallback.ttf(放入的中文字体名称)' ...
  • 1.创建一个ui蓝图。 2.在其他蓝图上把ui界面显示出来。 3.在UI蓝图上添加一个text组件。...4.找到字体,点击查找定位图标,找到roboto。...5.双击打开roboto,添加字体。 6.保存,运行。 ...
  • MaterialUI中文使用指南

    2021-03-11 01:03:24
    目录MaterialUI安装简单使用指南主要使用的组织社区地址许可证类型常用组件介绍Avatar小览属性列表样式属性 MaterialUI ...加载Roboto字体 <link rel="stylesheet" href="https://fonts.googleapis.co
  • 最后,研究了一下终于知道是为什么了,那些不显示的文字,是因为我们在段落中用了空格,中文逗号,顿号等等~其实最重要的原因是,我们用了英文字体(Roboto)打中文字了(如下图),目前Figma是不兼容用英文字...
  • 抽屉式导航 抽屉式导航是Google应用程序中一种常见的模式。...Roboto Medium, 14sp, #FFFFFFRoboto Regular, 14sp, #FFFFFF列表项: Roboto Medium, 14sp, 87% #000000副标题: Roboto Medium, 14sp, 54%
  • “Options”Tab页->”Display“二级Tab页->...修改为支持中文的系统字体,Windows用户建议“Microsoft Yahei”,Mac建议修改为“Roboto”或者“STIXIntegralIsSm”。 转载于:https://blog.51ct...
  • material design颜色选择 700 500 100 material design字体大小 ...英文字体使用Roboto中文字体使用Noto。 12sp 小字提示; 14sp 正文,按钮文字; 16sp listItemMessage; 20sp AppbarTitile,li
  • 中文字体:Source Han Sans / Noto 英文字体:Roboto 元素 字重 字号 行距 字间距 App bar Medium 20sp - - Buttons Medium 15sp - 10 Headline Regular 24sp ...
  • Material Design 摘要

    2015-12-02 13:56:00
    Material Design 摘要字体这里面太繁杂了,官方给出了一个大概,我这里仔细的做个整理英文字体Roboto 中文用Noto这里还有一个尺寸单位的问题,这里使用的单位为DP原话为:“在为安卓系统开发程序时,可扩展的像素...
  • 中文字体:思源黑体Source Han Sans / Noto(是一个字体,叫法不同而已) 英文字体:Roboto 注意:安卓的字号单位是SP 720×1280常见的字体大小: 24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的...
  • 1、字体使用规范中文字体:思源黑体Source Han Sans / Noto(是一个字体,叫法不同而已)英文字体:Roboto注意:安卓的字号单位是SP720×1280常见的字体大小:24px、26px、28px、30px、32px、34px,36px等等。...
  • 本文讲述的文字设计规范,包含以下部分:1、类型2、字号3、字重4、行高5、行宽6、颜色 1、类型 iOS设备的系统默认字体中文为苹方,英文&数字为SF UI Text。Android设备系统默认字体中文为思源黑体,英文&...
  • Material Design(一)

    2021-01-10 13:15:51
    Material Design,中文名:材料设计语言,是由Google推出的全新的设计语言,谷歌...目 的为不同平台”提供更一致、更广泛的“外观和感觉”适用平台手机、平板电脑、台式机等重要功能系统字体Roboto的升级版本等 ...
  • Material Design语言 的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让...
  • Material Design

    2019-10-01 14:49:16
    Material Design,中文名:材料设计语言,是由Google推出...Material Design语言[1]的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新...

空空如也

空空如也

1 2
收藏数 28
精华内容 11
关键字:

roboto中文字体