风格化文本以针对不同语言使用不同字体?

2023-11-30

有没有一种方法可以对 HTML 页面上的文本进行样式化,以便它针对不同的语言自动使用不同的字体?我的网站使用英语和阿拉伯语。我想根据显示的语言使用不同的字体。

假设我有这样的一段:

”上一句是阿拉伯语,但这一句是英语。

我希望阿拉伯语句子用 X 字体呈现,但英语句子用 Y 字体呈现。

有没有一种方法可以做到这一点,而无需根据服务器端有关其语言的知识手动为每组文本指定不同的 CSS 样式,即将每个句子包装在不同的 CSS 类中?

谢谢


Jukka 是对的,你无法自动区分语言。您可能需要在适当的情况下设置 lang 属性。您有以下选择:

  • 使用 CSS2 :lang 伪选择器;
  • 使用 CSS3 :ltr 或 :rtl 伪选择器根据文本方向性设置字体(实际上不一定是最好的主意);
  • 使用 CSS3 :script 伪选择器。据我所知,实际上您可能正在寻找这个。

第一个解决方案的代码片段如下:

body {
  font-family:Palatino,serif;
}

:lang(ar) {
  font-family: "Traditional Arabic",serif;
}

对于第二种选择,我已经说过这不是一个好主意。事实并非如此,因为许多语言都是从左到右或从右到左书写的。您肯定不想对希伯来语文本使用“传统阿拉伯语”字体。我提到这个选项,是因为它可以帮助你解决其他问题。

对于最后一个:

:script(Arab) {
  font-family: "Traditional Arabic",serif;
}

外部链接

  • 关于 lang 选择器的 W3C i18n 文章
  • 冈纳·比特斯曼演讲 from 利默里克多语言网络研讨会- 这就是这些代码片段的来源(我可以轻松地自己创建它们,但决定咨询专家)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

风格化文本以针对不同语言使用不同字体? 的相关文章

  • 如何让CSS选择以字符串开头的ID(不是Javascript)?

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro
  • chrome 中选择选项元素的额外填充

    我有一个选择元素 用户可以在其中选择分类和描述 仅在 Chrome 浏览器中 我有一个额外的填充 无法使用 padding 0 或其他 css 标签删除它 Chrome 的屏幕 https i stack imgur com m3iIb p
  • 将图像编码为base64有什么效果?

    如果我将图像 jpg 或 png 转换为 base64 那么它会更大 还是具有相同的大小 会大多少呢 是否建议在我的网站上使用 Base64 编码的图像 大约会大 37 非常粗略地说 Base64 编码的二进制数据的最终大小等于原始数据大小
  • 无法在jspdf中加载多个图像

    我正在尝试加载动态生成的多个图像 我想将这些图像转换为 PDF 格式 HTML 代码如下
  • Bootstrap 5 是否删除了行之间的间距?

    我开始使用 bootstrap 5 并注意到行之间没有空格 我们是否必须明确使用spacing https getbootstrap com docs 5 0 utilities spacing 实用程序喜欢mb 3 or mb 2等等试图
  • 类方法作为 JavaScript 中的事件处理程序?

    JavaScript 中是否有最佳实践或通用方法将类成员作为事件处理程序 考虑以下简单示例
  • CSS3变换:悬停时翻译,带有过渡[重复]

    这个问题在这里已经有答案了 这应该很简单 我的 HTML 中有一堆锚点 如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 如何覆盖 bootstrap 表 td 样式?

    我正在使用 Bootstrap 3 3我有一个 HTML 代码如下 div table class table table striped tr td 03 td td 04 td td 05 td td 06 td td 07 td td
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • HTML5 支持命名空间吗?

    我们是否可以使用新标签来扩展 HTML5 例如
  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • 可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?

    我想使用 HTML5 视频播放器并流式传输视频 S3 CloudFront 可以实现这一点吗 我了解 Amazon 使用 RTMP 流媒体协议和 HTML5video标签不支持 RTMP 有没有办法用 HTML5 播放器播放视频 Wayne
  • Outlook 2013 渲染问题:嵌套表格截断相邻文本

    在开发 html 电子邮件通讯时 我经常使用类似于以下的结构 table width 244 border 0 cellpadding 0 cellspacing 0 tr td table border 0 align left tbod
  • 没有类的 CSS 选择器

    我正在使用选择器来选择不具有一个类的所有元素 list th not foo some rules 我怎样才能将其应用到多个班级 list th not foo list th not bar some rules 上面的 CSS 当然不会
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • 使用 VBA 通过 Access 导航网页/操作 IE

    你好 StackOverflow 社区 我有一个关于使用 Access VBA 操作 IE 的问题 本质上 我正在尝试编写代码 使用 IE 打开特定网页 在该页面中搜索特定链接 目标链接的名称将取决于用户的情况 通过以编程方式单击该链接导航

随机推荐

  • 以编程方式清除 Android 上 PhoneGap/Cordova 应用程序的缓存以模拟全新安装?

    这与我之前的问题有关 每次安装应用程序时 如何清除 Android 模拟器上应用程序的 localStorage 它还建立在 如何清除 Android 应用程序缓存 and 如何以编程方式清除应用程序数据 上述问题都没有给出适用于 Andr
  • 新线程的异步等待行为

    我试图理解 async await 的精确行为 但在理解它时遇到了一些麻烦 考虑这个例子 public async void StartThread while true SomeOtherClass SomeSynchronousStuf
  • win 秒更新后 MS-access 无法捕获树视图事件

    使用 TreeView MSComctlLib TreeCtrl 2 的 Access 2010 应用程序按预期显示和填充 但在 Windows 安全补丁之后突然不会将事件触发回 VBA 尝试回滚 syswow64 中的 MSCOMCTL
  • 获取远程PC的日期时间?

    是否有任何类可用于获取 net 中远程 PC 的日期时间 为此 我可以使用计算机名称或时区 对于每种情况 是否有不同的方法来获取当前日期时间 我使用的是 Visual Studio 2005 我给你一个解决方案 使用WMI 您可能需要也可能
  • 如何使用请求模块下载,然后上传文件而无需中间文件

    我想先下载一个图像文件到服务器 然后将该文件上传到其他服务器 如果没有download file step 这将非常简单 var fs require fs var path tmp test png var formData method
  • 带 bo​​otstrap.css 的 webpack 不起作用

    这是我的webpack config js file var ExtractTextPlugin require extract text webpack plugin webpack require webpack module expo
  • 括号可以使用任意标识符作为参数吗? C++

    例如 是 const int someInt 有效代码 如果是这样 该声明与 const int someInt 您可以在两边放置任意多个括号表达式而不改变含义 但你不能对类型做同样的事情 特别是 正如其他人指出的那样 代码中的括号将含义从
  • 在 R 中创建地形图

    我正在尝试创建一个脚本 该脚本将为给定的一组坐标生成二维地形或等高线图 我的目标类似于 contour volcano 但对于用户设置的任何位置 事实证明 这具有惊人的挑战性 我努力了 library elevatr library tid
  • 我可以使用 Order By 和 ToLower 对 DocumentDB 执行不区分大小写的字符串排序吗?

    我想按标题的字母顺序对 DocumentDB 集合中的记录进行排序 起初我认为这是有效的 SELECT c Title FROM c ORDER BY c Title 但正如预期的那样 这会将小写字母排在大写字母之后 我希望我的搜索不区分大
  • android:对话框或弹出窗口内的webview

    如何在对话框或弹出窗口中添加 Web 视图 我的网络视图保留 URL WebView loadurl 当视图添加到对话框内时 它仍然移动到浏览器 我去过android 在对话框中加载webview但没有例子说明如何做吗 谢谢 这是示例 Al
  • 适用于 Java 8 的 Tomcat 8 Maven 插件

    Is the tomcat7 maven plugin使用 tomcat 8 服务器和 java 8 我找不到任何tomcat8 maven plugin 是的你可以 In your pom xml 添加tomcat插件 您可以将其用于 T
  • 是否可以防止 TeamCity 中的构建链被中断?

    我在 TeamCity 7 1 3 中进行了以下设置 项目A 构建和部署 A 测试 A 快速 测试 A 慢速 测试 A 非常慢 项目B 构建和部署 B 测试 B 快速 测试 B 慢速 A 的所有测试都依赖于 构建和部署 A B 的所有测试都
  • printf C 中十六进制值的最后一个字节

    我有一个简单的问题 代码非常短 所以我只是将其发布在这里 include
  • 动态设置 ui-sref Angularjs 的值

    我搜索过类似的问题 但出现的问题似乎略有不同 我正在尝试动态更改链接的 ui sref 此链接指向向导表单的下一部分 下一部分取决于下拉列表中所做的选择 我只是想根据选择框中的某些选择来设置 ui sref 属性 我可以通过绑定到在进行选择
  • 如何防止gcc优化破坏rep movsb代码? [复制]

    这个问题在这里已经有答案了 我尝试使用以下命令创建我的 memcpy 代码rep movsb操作说明 当禁用优化时 它可以完美地适应任何尺寸 但是 当我启用优化时 它无法按预期工作 问题 如何防止gcc优化破坏rep movsb代码 我的代
  • 使用 Ruby 驱动程序的 MongoDB Group

    我正在尝试带回一个包含用于描述博客文章的计数的年 月组合列表 我们的想法是 它们将像这样显示 2010 年 1 月 1 篇文章 2009 年 12 月 2 个职位 我已经设法使用 MongoDB JS shell 让它工作 并且它以有用的格
  • PHP-PDO从数据库获取元数据

    我想从带有 朋友 表的数据库中获取元数据 id name 1 Herbert 2 LG 3 Levins 这是我试图获取数据的代码
  • 如何正确手动重新创建 sklearn (python) 逻辑回归 Predict_proba 结果以进行多重分类

    如果我运行 4 个类的基本逻辑回归 我可以获得 Predict proba 数组 如何使用系数和截距手动计算概率 获得与 Predict proba 生成的相同答案的确切步骤是什么 网上似乎有很多关于此的问题和一些建议 这些建议要么不完整
  • Android 中不显示选项菜单

    我有这个代码来创建菜单 Override public boolean onCreateOptionsMenu Menu menu super onCreateOptionsMenu menu MenuInflater inflater g
  • 风格化文本以针对不同语言使用不同字体?

    有没有一种方法可以对 HTML 页面上的文本进行样式化 以便它针对不同的语言自动使用不同的字体 我的网站使用英语和阿拉伯语 我想根据显示的语言使用不同的字体 假设我有这样的一段 上一句是阿拉伯语 但这一句是英语 我希望阿拉伯语句子用 X 字