精华内容
下载资源
问答
  • 字体图标可以到阿里巴巴矢量图上下载。  将下载好iconfont.ttf放进mui/dist/fonts里面。在mui.css中加入以下代码。 @font-face { font-family: Muiicons; font-weight: normal; font-style: normal; ...

      字体图标可以到阿里巴巴矢量图上下载。

      将下载好的iconfont.ttf放进mui/dist/fonts里面。在mui.css中加入以下代码。

    @font-face {
        font-family: Muiicons;
        font-weight: normal;
        font-style: normal;
        src: url('../fonts/icon.ttf') format('truetype');
    }
    <!-- 从阿里巴巴矢量图上选好图标下载下来后,会包括一下代码,引入后,就能使用了 -->
    .icon-myshouye:before { content: "\e605"; }
    
    .icon-myhuiyuan:before { content: "\e636"; }
    
    .icon-myicon-:before { content: "\e64b"; }
    
    .icon-mygaiicon-:before { content: "\e6cf"; }

            <span class="mui-icon icon-myshouye"></span>    //这样就能调用了

      

    转载于:https://www.cnblogs.com/sujianfeng/p/8872572.html

    展开全文
  • 字体也不是随便就能使用的,如果是有版权的字...我这边买的是汉仪的字体,把ttf文件放到项目中,然后自定义font.css font.css代码 font-family是在以后的引用会用到的名称 @font-face { font-family: 'HYLi...

    字体也不是随便就能使用的,如果是有版权的字并且进行了大规模商用,很有可能面临着一大笔的赔偿金,所以公司会购买一些字体的使用权,所以在日常做项目时会经常使用到自定义字体引入的问题。我遇到的是Vue项目的自定义字体的使用和tinymce富文本编辑器的自定义字体使用的问题。

    我这边买的是汉仪的字体,把ttf文件放到项目中,然后自定义font.css

     

    font.css代码    font-family是在以后的引用会用到的名称

    @font-face {  
      font-family: 'HYLiZhengEnXiaoKaiJ';
      src: url('HYLiZhengEnXiaoKaiJ.ttf');
    }

     

    在App.vue的style中引入

    <style>
      @import './components/font/font.css';
      
    </style>

     

    然后在需要用到字体的页面上使用该字体样式

    #fontTest{
        font-family:HYLiZhengEnXiaoKaiJ;
    }

     

    然后就能看到你引入的那个样式了。

     

    tinymce富文本编辑器中进行购买字体的自定义

    tinymce的默认字体是在node_modules的tinymce/themes/silver 下的theme.js和theme.min.js中,搜defaultFontsFormats就能看到。如果使用@tinymce/tinymce-vue的Editor未进行使用字体的定义,即font_formats参数的定义,则会默认启用defaultFontsFormats参数下的字体(这下面有一些也不可以商用的)。所以要进行font_formats的定义过滤那些收费的,修改font_formats修改富文本编辑器的字体选择列表,并加入自己购买的字体。

     

    因为theme.js和theme.min.js文件是在构建项目的时候加载进来的,手动篡改它肯定是不靠谱的。虽然font_formats加入了自己购买的字体,App.vue也配置过了自定义的字体,但有个问题是编辑的时候富文本编辑器上不能即时看到自定义的字体,只有在本机安装了的情况下才能即时看到,但是编辑完了在页面上可以看到。所以这就有个问题,就是编辑的那个人电脑上得装该字体,浏览的人不需要安装就可以正常访问看到该字体。

    展开全文
  • java引入自定义字体的方法

    千次阅读 2018-12-04 16:41:17
    java引入自定义字体的方法java项目中,有时我们需要引入一些外部的自定义的字体最近接手别人项目的时候遇到了一个大坑,差点就炸了(&amp;amp;gt;.&amp;amp;lt;)先说下背景:第一种:可以避免产生.tmp临时...

    java项目中,有时我们需要引入一些外部的自定义的字体

    先说下背景:最近接手别人项目的时候遇到了一个坑(>.<)

    接手一个迭代过多次的项目(未正式提供给客户使用,只给客户试用了几次)。在实现了新需求,眼瞅着可以再发一个迭代时,却没想到却遇到了一个坑。自测进行批量生成pdf任务的时候,发现了一个bug。执行多个批量生成任务之后,竟然发现本机硬盘存储空间所剩无几了,之前可是还是100多个G的。

    赶紧使用360进行磁盘清理,发现空间竟然被临时文件占掉了80多个G,打断点仔细排查之后,终于定位到了问题:接手前的代码中有对图片进行操作,中间引入了自定义的字体,在引入字体的时候每次都会产生一个20M左右的.tmp临时文件,然后就抓紧进行了处理。

    下面有两种方式:

    第一种:可以避免产生.tmp临时文件,避免大批量引入的时候吃掉硬盘的空间(个人推荐)

    直接上代码:

    	//filepath字体文件的路径
    	private static java.awt.Font getSelfDefinedFont(String filepath){
            java.awt.Font font = null;
            File file = new File(filepath);
            try{
                font = java.awt.Font.createFont(java.awt.Font.TRUETYPE_FONT, file);
                font = font.deriveFont(java.awt.Font.PLAIN, 40);
            }catch (FontFormatException e){
                return null;
            }catch (FileNotFoundException e){
                return null;
            }catch (IOException e){
                return null;
            }
            return font;
        }
    

    第二种方式:原先实现方法–需要注意会产生.tmp临时文件,但是好像挺多人用这种方式(个人不推荐)

    	private static java.awt.Font getSelfDefinedFont(String filepath){
            java.awt.Font font = null;
            File file = new File(filepath);
            try{
                FileInputStream fi = new FileInputStream(file);
                BufferedInputStream fb = new BufferedInputStream(fi);
                font = java.awt.Font.createFont(java.awt.Font.TRUETYPE_FONT, fb);
                font = font.deriveFont(java.awt.Font.PLAIN, 40);
            }catch (FontFormatException e){
                return null;
            }catch (FileNotFoundException e){
                return null;
            }catch (IOException e){
                return null;
            }
            return font;
        }
    
    展开全文
  • 在制作网页的时候我们通过会通过设置 font-family 来定义页面字体,但有的时候系统自带的字体并...但有一些例如网站的标题,订单数字等动态生成的内容,就没办法切图了,这个时候我们就可以引入自定义的字体了。 自...

    在制作网页的时候我们通过会通过设置 font-family 来定义页面字体,但有的时候系统自带的字体并不能满足我们的全部需求,为了页面的丰富性和美观性,我们可能需要在特定的地方使用一些特定的字体。
    如果这个艺术字的内容是固定的,那我们大可以直接用切图的方式来解决,比如网站的 Logo 这种;但有一些例如网站的标题,订单数字等动态生成的内容,就没办法切图了,这个时候我们就可以引入自定义的字体了。

    自定义的字体的选择

    谷歌为我们提供了很多免费的在线字体可供选择,打开 www.googlefonts.cn/# 国内镜像(国内不能使用谷歌服务),选择你中意的字体,生成代码,使用 link 标签引入到页面中即可,非常的方便~

    生成本地字体文件

    如果觉得在线的字体不稳定,或者设计师已经提供了 设计稿里面的字体文件,那我们也可以直接使用本地字体,这里要推荐一个很好用的网站 www.fontsquirrel.com/,选择 Generator ,上传你的字体文件,像之前设计师提供给我的就是 ttf 格式。上传之后,选择 OPTIMAL 格式,点击 DOWNLOAD YOUR KIT ,会下载下来一个压缩包。
    1140866-20180916022428688-1632197274.png

    打开这个压缩包,会发现各种格式的字体文件都已经生成好了,同时还生成了一个 css 文件,在这个文件里面它已经自动给你生成好了 @font-face 并引入了字体文件,你只需要在页面里面引入这个 css 文件就可以使用这个字体咯!
    1140866-20180916022549524-234555458.png
    1140866-20180916022704459-1275940888.png
    1140866-20180916023036724-1142622300.png
    1140866-20180916023056486-1640449242.png

    扩展

    • 目前到项目里面我只考虑了英文字体和数字字体的引入,因为中文字体文件实在是太大了,根本没必要。看到其他教程说到可以用字蛛来压缩,下次可以试试。字蛛

    转载于:https://www.cnblogs.com/linxue/p/9653780.html

    展开全文
  • vue引入自定义字体

    2020-06-05 13:59:53
    1.在网上搜索你需要的字体,并且下载你所需要的字体包(.ttf / .otf) 2.在公共文件common里面新建font文件,在font文件里面新建font.css 和将下载的字体包(.ttf / .otf)拖到font文件夹下 @font-face{ font-family: ...
  • CSS引入自定义字体

    2020-02-23 15:18:07
    @font-face{ font-family:"Montserrat-ExtraLight"; 自定义一个名字 src: url(/baidu/index/font/Montserrat-... 字体文件路径 } 然后就可以用了 * { margin: 0; padding: 0; font-family:"Montserrat-Ext...
  • 使用示例: ... src: url(“被引入的字体名称目录路径名.eot”); src:url(“被引入的字体名称目录路径名.woff”) format('woff'), url(“被引入的字体名称目录路径名.ttf”) format('truetype'), ur...
  • 1 在src/assets下新建font文件夹,文件夹中包含以下文件 2 新建font.css @font-face { font-family:'ALPH';...3 在项目中(main.js)引入刚刚加载进来的字体 import './assets/font/font.css' 在m
  • 本篇文章主要介绍了详解如何在css中引入自定义字体(font-face),能将自定义的字体添加到网页中,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 1. 怎么引入使用外部自定义的字体?产品小姐姐说电脑上自带的字体太丑了,要用酷炫的字体,产品小姐姐都发话了,那我们就只有引入外部的自定义字体咯。要引用外部的自定义字体,需要使用到CSS3里面的@font-face,...
  • 微信小程序引入字体: wx.loadFontFace({ family: ‘字体名称’, source: 字体utl, success(res) { console.log(item.name + ’ 字体加载成功’) }, fail: function(res) { console.log(item.name + ‘加载字体失败...
  • 1、 将字体文件放在对应目录下面 2、新建引入文件如下图 3、main.js引入 4、调用:
  • web网页引入自定义字体设置

    万次阅读 2017-11-30 11:55:20
    新项目中 设计用了一个自定义的字体,由于不熟悉,折腾了好大一圈,最终在同事的帮助下,顺利解决,记录一下,供有同样疑虑的小伙伴参考。 1、首先需要下载你需要的字体,此项目中用到的字体是思源黑体(light),...
  • java 引入自定义字体font后,tomcattemp目录出现tmp文件,不留意话,可能占满磁盘空间。 在网上寻找解决办法,找到这篇文章,转载过来。 原文地址:https://www.cnblogs.com/zcy_soft/p/3503656.html -----...
  • 有个需求要用美术字体在图片上写字用自定义的文字有两个方法:1、Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream input);2、Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, new ...
  • 1、下载需要的字体,.eot .ttf .woff .svg格式 2、没有的字体格式,请下载字体转换器fontCreate 软件(有中文破解版)转换一下,然后把转换的字体格式放到项目下的fonts文件夹里 3、3、css中引入字体文件 @font-...
  • 在开发的过程中,android系统自带的字体中规中矩,样式也不外乎就是加加粗,打打斜,很多时候并不能满足我们的需求,此时我们可以引入其他自己下载好的字体,植入到我们自己的程序中,按需使用,大致的步骤如下: ...
  • 1.先到:Iconfont定义好自己需要的字体图标,并添加至项目。 2.将该项目的.zip文件下载,解压后找到iconfont.ttf文件,将该文件添加至,打开:Base64 encode后转换。 3.将转换后的.zip文件下载,解压后找到stykesheet....
  • 微信小程序引入外部字体 看了网上很多文章后发现可以把字体上传到https://transfonter.org/转成base64后下载下来, 引入对应css后发现太大啦, 然后在网上搜罗了一番,发现了一个神奇网站可以在线提取字体...
  • 最近在做小程序开发时,需要使用到第三方的字体,由于小程序不能将字体放到本地,所以试了下 wx.loadFontFace({ family: 'webfont', source: 'url("http://cdn.123123.com/minijianhanzhenguangbiao.ttf")', ...
  • 字体准备: 去谷歌字体网下载想要的字体...1.将下载的字体文件存到: 2.在index.html中引入: <link rel="stylesheet" href="<%= BASE_URL %>fonts/daysOne.css"> 3.在想要引入字体的vue文件中设置font-
  • CSS3中是否可以引入自定义下载的字体呢?如果可以我们应该怎么引入?带着这一系列的问题我们来看下解决方案,说什么都不如看效果,下面是三种字体在网页中的效果,“春联标准字体”、“江南艺术调字体”和“毛浙东...
  • 在网上找了下教程, 大多数都要获取字体文件真实字体名,用起来比较麻烦. 在iOS7中,引入了UIFontDescriptor,so...可以这么写. UIFontDescriptor *fontdesc = [UIFontDescriptor ...
  • css中引入自定义字体PingFang-SC-Regular

    千次阅读 2020-06-14 23:59:58
    网页中想使用自定义的字体PingFang-SC-Regular,需要在css中引入 @font-face { font-family: 'PingFang-SC-Regular'; src:url('../fonts/PingFang-SC-Regular.eot'); src:url('../fonts/PingFang-SC-Regular....
  • 本文只引入iconfont图标 在iconfont内获取到图标后 下载到本地 后将 iconfont.ttf... 将转码后一长串引入到iconfont.css文件中src内,原有src内内容删除掉.在将新iconfont.css在app.vue文件中引入 则可...
  • 1、去官网选择icon图标并下载,具体操作请百度...3、在入口文件中全局引入iconfontcss import './assets/iconfont/iconfont.css' 4、在需要使用页面中引入 <i class="iconfont icon-fengche"></i>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 507
精华内容 202
关键字:

引入自定义的字体