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

如何将oswald google字体应用到tinymce编辑器中作为字体家族下拉列表中的列表?

要将Oswald Google字体应用到TinyMCE编辑器中作为字体家族下拉列表中的列表,可以按照以下步骤进行操作:

  1. 下载Oswald字体文件:在Google Fonts(https://fonts.google.com/)搜索Oswald字体,并选择下载该字体的压缩包。
  2. 解压字体文件:将下载的压缩包解压,得到Oswald字体的文件。
  3. 将字体文件上传到服务器:将解压得到的字体文件上传到服务器上的某个目录,例如/public/fonts。
  4. 引入字体样式:在HTML文件的头部部分,添加以下代码来引入字体样式:
代码语言:txt
复制
<style>
  @font-face {
    font-family: 'Oswald';
    src: url('/public/fonts/Oswald-Regular.ttf') format('truetype');
  }
</style>

请确保url中的路径与上传到服务器上的字体文件路径一致。

  1. 配置TinyMCE编辑器:在TinyMCE的初始化配置中,添加以下代码来将Oswald字体添加到字体家族下拉列表中的列表:
代码语言:txt
复制
tinymce.init({
  selector: 'textarea',
  toolbar: 'fontselect',
  font_formats: 'Oswald=Oswald, sans-serif',
  content_css: 'https://cdn.jsdelivr.net/npm/tinymce@5.0.0/themes/silver/theme.min.css'
});

这里的font_formats属性用于定义字体家族下拉列表中的选项,将'Oswald=Oswald, sans-serif'添加到列表中。content_css属性用于加载TinyMCE的样式文件。

  1. 保存并应用配置:将上述代码保存到HTML文件中,并在页面加载时初始化TinyMCE编辑器,确保字体家族下拉列表中已包含Oswald字体。

以上步骤是将Oswald Google字体应用到TinyMCE编辑器中作为字体家族下拉列表中的列表的方法。对于腾讯云相关产品和产品介绍链接地址,请参考腾讯云官方文档或联系腾讯云客服获取相关信息。

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

相关·内容

WordPress 3.9+ TinyMCE 4 编辑器增强开发

从WordPress 3.9版本后,WordPress 默认编辑器 TinyMCE 随之升级到了版本4,带来问题以前在默认编辑器增强开发效果可能失效。...这篇文章旨在破旧立新,通过几个例子给大家带来几个TinyMCE4 编辑器增强开发技巧。...还原字体种类及大小选择按钮 默认的话,字体种类及大小这两个按钮没有添加到TinyMCE 编辑器,通过下面的函数,就可以实现有下拉形式字体种类及大小这两个按钮。...除了默认字体,根据个人需求你可能需要添加其他字体,比如说Google font(不过在天朝嘛目前貌似有点难连接这个)上字体,那么你可以用下面的代码注册一个自定义字体。...' ); 增加编辑器下拉菜单功能 先看图,就知道实现效果是什么了,这个的话在 Devework主题1.5 版本之后短代码功能上按照这个增加了可视化状态下输入按钮。

97760

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认那个编辑器叫做TinyMCETinyMCE是一个轻量级基于浏览器所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好支持。...";')); 添加编辑器默认内容(编辑器内可见) 新建文章后编辑器内容默认是空,有些朋友做是WordPress主题站、插件站或单纯下载站,一些标准格式化文章每次都会输入“主题名称”、“主题作者...', 'insertPreContent'); 添加更多HTML标签(慎用) 此功能请慎用,因为WordPress自带TinyMCE编辑器会默认过滤掉不符合XHTML 1.0html标签,不排除某些情况下也可能会用到这些标签...)、右对齐(justfyright)、两端对齐(justfyfull)、无序列表(bullist)、编号列表(numlist)、减少缩进(outdent)、缩进(indent)、剪切(cut)、复制(copy..."); //添加到工具栏第三行 让编辑器支持中文拼写检查 WordPress自带TinyMCE编辑器默认对英文拼写进行检查,怎么样才能让其支持中文拼写检查呢?

2.8K50

解决新版wordpress打开速度超级慢问题

然后仔细排查了一下原因,发现是由于 Google服务器无法访问造成,因为新版wordpress系统中会加载谷歌Opensans字体样式,导致网站非常慢,需要等待很久。...文件改名为function.php.backup 作为备份,使用你常用文本编辑器,比如 EverEdit 编辑器,打开 function.php文件,添加下面代码,保存,用ftp上传覆盖即可 function...哪些文件调用了 Google Fonts 和 Google Ajax 服务 WordPress 3.5 之前版本,核心程序和自带主题都没有调用 Google Fonts 和 Google Ajax...文件改名为 script-loader.php.backup 作为备份,使用你常用文本编辑器,比如 EverEdit 编辑器,打开 script-loader.php 文件,将其中 googleapis.com...Fonts 字体库和 Google Ajax JS资源库全部换成了360网站提供服务上了。

5.6K30

Android Oreo 可下载字体

为了帮助您开始使用可下载字体功能,您可以使用 Google Play 服务字体提供程序。...*注意:设备必须具有 11 或更高版本 Google Play 服务才能使用 Google 字体提供程序。...▲ 使用布局编辑器 在源代码下拉列表,选择 Google 字体 在 “字体” 框,选择一种字体 选择创建可下载字体,然后单击确定 *注意:要在应用程序捆绑字体,请选择添加字体到工程                                          ...要创建请求,请传递以下参数: 字体提供者权限 字体提供程序包,以验证提供程序身份 用于查询字体字符串 用于验证提供商身份证书散列集合列表。...使用可下载字体作为 XML 资源 在 res / font 文件夹创建一个新 XML 文件 添加 根元素,并设置与以下示例 XML 文件所示字体相关属性: <?

10710

Android Oreo 可下载字体

为了帮助您开始使用可下载字体功能,您可以使用 Google Play 服务字体提供程序。...*注意:设备必须具有 11 或更高版本 Google Play 服务才能使用 Google 字体提供程序。...▲ 使用布局编辑器 在源代码下拉列表,选择 Google 字体 在 “字体” 框,选择一种字体 选择创建可下载字体,然后单击确定 *注意:要在应用程序捆绑字体,请选择添加字体到工程 ?                                          ...要创建请求,请传递以下参数: 字体提供者权限 字体提供程序包,以验证提供程序身份 用于查询字体字符串 用于验证提供商身份证书散列集合列表。...使用可下载字体作为 XML 资源 在 res / font 文件夹创建一个新 XML 文件 添加 根元素,并设置与以下示例 XML 文件所示字体相关属性: <?

1.2K30

英文字体选择 - 腾讯ISUX

这款字体是很早出现无衬线体,所以带有古风,笔画粗狂有力,具有男性化感觉,适合表现强有力。Web字体可以考虑Oswald。 ? ?...时代周刊字体更换,雅虎2013年使用Optima作为全新标识设计基准都证明了这款字体热度。 ? ? Grotesque字体,比Helvetica更加简练。字体家族非常全面,所以搭配使用很方便。...最后提两句Helvetica,内部分享时候很多设计师问到为什么没有作为一个推荐字体在这里列出,一方面是因为Helvetica已经作为现代字体经典字体被应用得非常广泛了,并不缺乏关注。...适合长文排版字体还有很多,比如无衬线体Lucida Sans,Geneva,衬线体freight text,看一些比较好设计时候不妨多留心一下字体是什么。...很多字体家族是同时包含称衬线体和无衬线体,它们在设计初始时候就有相同骨架,所以排版起来非常协调。

2.6K50

盘点2020年wordpress常用50个插件合集-吐血推荐

3、Autoptimize 选择自动优化插件 通过优化CSS,JS,图像,Google字体等来使您网站刷新。...提高读者保留率并降低跳出率 8、Disable Google Fonts 选择禁用Google字体,停用Google字体,禁用WordPress核心使用Google字体排队,默认主题,Gutenberg...10、Disable/Remove Google Fonts 选择禁用/删除Google字体,禁用/删除Google字体,通过禁用Google字体来提高前端性能。...19、OSS Upload 选择OSS上传,使用阿里云OSS作为媒体库附件存储空间,支持原始增强OSS协议包装和全原生图像编辑及衍生功能。...50、经典编辑器 启用WordPress经典编辑器和旧式编辑文章页面,包括TinyMCE,Meta Boxes等。支持扩展此页面的旧插件。

5.5K10

最全Pycharm教程(1)——定制外观

Pycharm作为一款强力Python IDE,在使用过程感觉一直找不到全面完整参考手册,因此决定对官网Pycharm教程进行简要翻译,与大家分享。...背景主题具体设置方法如下:(1)在主工具栏,单击来打开“Settings/Preferences”,然后单击参照说明:(2)在下面的对话框,单击“Theme”对应下拉菜单,然后选择一个你喜欢主题...4、如何更改编辑框主题颜色在更改完Pycharm主题背景之后,你可能对编辑器外观仍不满意,例如你希望将文档字符串改变为另外一种颜色,下面介绍具体更改方法:首先,我们再次单击工具栏上图标进入“Settings...单击“Save as”按钮,然后键入一个新字体框架名称:?现在我们发现我们所新建字体类型变为可编辑状态,我们可以根据自己喜好对它进行修改。...展开“Color and Font”节点,进入编辑器设置对话框:?首先,在语言空间下拉列表,单击选择当前文档字符串字体类型,通过预览窗口我们可以简单预览当前设置视觉效果。

2.4K20

英文字体选择

这款字体是很早出现无衬线体,所以带有古风,笔画粗狂有力,具有男性化感觉,适合表现强有力。Web字体可以考虑Oswald。 ? ?...时代周刊字体更换,雅虎2013年使用Optima作为全新标识设计基准都证明了这款字体热度。 ? ? Grotesque字体,比Helvetica更加简练。字体家族非常全面,所以搭配使用很方便。...最后提两句Helvetica,内部分享时候很多设计师问到为什么没有作为一个推荐字体在这里列出,一方面是因为Helvetica已经作为现代字体经典字体被应用得非常广泛了,并不缺乏关注。...适合长文排版字体还有很多,比如无衬线体Lucida Sans,Geneva,衬线体freight text,看一些比较好设计时候不妨多留心一下字体是什么。...很多字体家族是同时包含称衬线体和无衬线体,它们在设计初始时候就有相同骨架,所以排版起来非常协调。

3.2K30

C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

常用属性: 属性 值 FontAttributes 获取一个值,该值指示编辑器字体是粗体,斜体还是不显示 FontFamily 获取编辑器字体所属字体....FontSize 获取编辑器字体大小。 Text 获取或设置显示文本。这是一个可绑定属性。 TextColor 获取或设置文本颜色。...常用属性: 属性 值 FontAttributes 获取一个值,该值指示编辑器字体是粗体,斜体还是不显示 FontFamily 获取编辑器字体所属字体....LineBreakMode 设置行排列方式(枚举) 示例代码:  10.Picker 这个,大家也应该很熟悉,就是HTMLSelect, 下拉列表...常用属性: 属性 值 Items 下拉列表内容(字符串集合) SelectedIndex 获取或设置选中值下标 SelectedItem 获取选中值内容 Title 设置选择框标题 示例代码

1.8K90

niRvana · 轻拟物主题4.8完美版

Editor”(区块编辑器),在这种编辑器下,原有的“短代码”就显得非常落后了: 短代码存在问题:在旧TinyMCE编辑器,短代码往往需要手动输入和编辑,很难记忆和使用。...UI样式 您可以轻松在文章插入小标题样式、模态框、提示框、折叠内容、内容回复可见、下载按钮、下拉菜单、站内文章链接等,例如: 图片 图片 未标题 显示下拉菜单 左眼会配右眼哭の博客...2021年8月11日 全站静态资源使用七牛云CDN加速 解除蜗牛般默认外网头像服务器,评论模块随机头像 更换一套新颖3d表情作为评论可选表情 增加友情链接模块,也加了一些友链 在友链增加自助申请友情链接模块...) v3.6.0 1、修复:一处HTML标签错误 2、更新:内置FontAwesome字体到5.10.2版本 3、修复:WP5.3版本,“标签与链接”小工具无法添加数据问题 4、新增:主题自带小工具支持...,不过还是先修改了吧(将部分RichText改成TextControl) v1.2.0 1、Play字体在1.1.3丢失,现在找回来了 2、防采集、添加脏数据功能在之前存在问题被禁用。

8.6K10

前端富文本基础及实现

例如: 富文本编辑器富文本,是由红色框带有语义化标签和内联样式 html 渲染实现。通过富文本编辑器,即可实现富文本编写、展示。...目前常见前端富文本编辑器tinymce,UEeditor,draft 等。 文章下文将会讲述实现前端富文本编辑器一些基础知识和步骤。...富文件选区 富文本编辑我们在进行编辑时首先会先选择一块文本区域(即选区),比如选择一段文字并进行字体加粗等操作,那么选区本身包含了哪些信息呢,下面为大家简单介绍一下。...将选中文本改为指定字体大小 提供 HTML 字体尺寸 (1-7) foreColor 将选中文本改为指定颜色 颜色值字符串 formatBlock 将选中文本包含在指定 HTML标签 提供 HTML...zh-CN/docs/Web/API/Document/execCommand) 常用功能(字体样式、插入图片)演示 下图挑选了几个常用命令(加粗、斜体、改变字体颜色、插入图片)作为演示: 代码示例如下

4.3K50

玩转 PhpStorm 系列(一):主题篇

从今天起,学院君开始给大家演示如何玩转 PHP 中最好用 IDE —— PhpStorm,作为开篇,我们先来演示如何在 PhpStorm 切换及安装主题。...1、切换主题 PhpStorm 主题分为外观主题和编辑器主题两部分,顾名思义,外观主题负责 PhpStorm 整体主题,而编辑器主题负责代码编辑区域主题: ?...下面的字体和字号控制也是代码编辑器以外区域字体和字号,不会对编辑器区域字体和字号产生影响。...编辑器主题 而代码编辑器区域主题可以在 Preferences | Editor | Color Scheme 设置: ?...设置完成后,应用更改,就可以在主题下拉框中看到新增主题方案了: ? 当然,你可以按照自己喜好对其进行重命名。

2.7K40

vue富文本编辑器tinymce_vue移动端富文本编辑器

主流富文本编辑器对比 前言:vue很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。...wangEditor(国产,基于javascript和css开发web富文本编辑器,开源免费)优势:轻量简介,最重要是开源且中文文档齐全。缺点:更新不及时。没有强大开发团队支撑。...补充:Tinymce也是一款不错富文本编辑器,种植,各有优势和劣势,关键是选择一款最适合就好。因为笔者在开发vue,所以直接使用vue-quill-editor较为方便些。具体看情况使用。...需要有默认值 标题 - header [{ 'header': 1 }, { 'header': 2 }] 值字体大小 列表 - list [{ 'list': 'ordered...点击quill-editor图片上传时,实际点击了自定义图片上传,而后在返回网络路径后将图片插入富文本编辑器即可。

3.6K20

人人都会爱上高效神器

如果你还在使用 Word 写文章做笔记,利用它富文本编辑器满足样式需求,那么你该考虑换一种方式,投入到 Markdown 怀抱中了。 什么是 Markdown 呢?...喜欢码字朋友,常常因为文字排版而不能专注于文字写作。而 Markdown 作为一种轻量级标记语言,通过简单标记使普通文本具有一定文本格式,来实现对文本编辑和排版。...Markdown 对于喜欢码字和编程朋友,绝对是提高工作学习效率神器,我是在找实习工作时候了解到这个工具,并应用到简历,我博客,我读书笔记,一直到现在工作相关文档。...对于这个工作学习生活必备工具,让我们通过几个动图来看下使用效果。 标题和字体 分割线引用和列表 链接图片和表格 怎么样?是不是很方便,码字更流畅?...标题和字体 输入: # 这是一级标题 ## 这是二级标题 ### 这是三级标题 #### 这是四级标题 **加粗** *斜线* ~~删除线~~ ++下划线++ ==高亮== 输出: 分割线引用和列表

34020

Centos7安装字体库&中文字体

二、安装字体库 linux系统,一般不会安装字体,报表中发现有中文乱码和中文字体不整齐(重叠)情况,首先考虑就是操作系统是否有中文字体,在CentOS 7发现输入命令查看字体列表是提示命令无效:...如果有此命令,则可以通过fc-list查看当前系统安装了那些字体: #fc-list 如上图可以看出,不仅没有中文字体,连字体库都没有,那么接下来就记录一下在Linux CentOS 7如何安装字体库以及中文字体...-e /usr/share/X11/fonts/encodings/encodings.dir 修改字体配置文件了,首先通过编辑器打开配置文件: # vim /etc/fonts/fonts.conf...可以看到一个Font list,即字体列表,在这里需要把我们添加中文字体位置加进去: 不用重启,刷新内存字体缓存使配置对系统生效: # fc-cache 最后,还有很重要一步,就是重启用到字体服务...,将字体应用到服务中去

3.7K10

Atom飞行手册翻译: 3.5 创建主题

UI主题为树视图、选择夹、下拉列表和状态栏之类元素定义样式。语法主题为编辑器代码定义样式。...如果你打开设置视图(cmd-,),并且访问左边Themes部分,你会看到Syntax Theme下拉列表列出了Motif。从菜单中选择它来加载。...接着打开styles/base.less来修改预先定义选择器。选择器为编辑器不同部分定义样式,例如注释、字符串和侧栏行号。...下拉列表来开启主题 做一些修改。...开发者工具允许你查看各个元素,以及他们CSS属性。 简单介绍请查看Google扩展教程。 Atom 样式指南 如果你在创建一个界面主题,你可能想要一种方式来查看你主题如何影响系统组件。

44720

Visual Studio 2008 每日提示(六)

,如果存在链接,如何单击URL后在ide内置浏览器定位(转到)到相应链接,设置方法如下: 菜单:工具+选项+文本编辑器+所有语言+常规,选中”启用单击URL定位”项。...按Ctrl同时单击链接,就可以在新文档窗口打开链接。 评论:无论是注释还是代码带有链接,都可以,但链接必须包括”http://”。不过我觉得这个功能我用不多,我很少在vs里面打开网页。...,也就是通常说强迫智能感知 当然,你可以通过工具栏“显示成员列表按钮来实现这个功能。...”下拉框选择“语句结束”,然后设置字体。...下面是调整到12号字体后显示 评论:如果你嫌“完成语句”字体或颜色不喜欢,可以来设置 #059、调整语句完成窗口尺寸大小 原文地址:http://blogs.msdn.com/saraford/archive

938100

07.HTML实例

HTML 段落 HTML 段落 更多段落 本例演示在 HTML 文档折行使用。...文本下划线与删除线 HTML 样式 HTML Style 元素 背景色样式 字体样式,颜色,大小 文本对齐样式 设置文本字体 设置文本字体大小 设置文本字体颜色 设置文本字体字体大小,字体颜色...HTML使用不同样式 没有下划线链接 链接到一个外部样式表 HTML 链接 创建超级链接 将图像作为链接 在新浏览器窗口打开链接 链接到同一个页面的不同位置 跳出框架 创建电子邮件链接...) 单元格间距(Cell spacing) HTML 列表 无序列表 有序列表 不同类型有序列表 不同类型无序列表 嵌套列表 嵌套列表 2 定义列表 HTML Forms 和 Input...创建文本域(Text fields) 创建密码域 复选框 单选按钮 简单下拉列表 预选下拉列表 本例演示如何创建一个文本域(多行文本输入控件)。

8.1K40
领券