AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

User select font-face/color/size/backgroundColor设置 字体，颜色，大小，背景色兼容主流浏览器

2011-12-18 1029
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>< 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>User select font-face/color/size/backgroundColor设置 字体，颜色，大小，背景色兼容主流浏览器 </title>
<meta name="author" content="Geovin Du 涂聚文"/>
<meta name="Keywords" content="塗聚文  締友計算機信息技術有限公司 "/>
<meta name="Description" content="塗聚文  締友計算機信息技術有限公司 "/>
</head>

<body>
<form>
Font:<select onchange="document.body.style.fontFamily=this[this.selectedIndex].value">
  <option value="">Default</option>
  <option value="Arial">Arial</option>
  <option value="Times New Roman">Times New Roman</option>
  <option value="Courier New">Courier New</option>
  <option value="黑体">黑体</option>
  <option value="宋体">宋体</option>
  <option value="隶书">隶书</option>
  <option value="幼圆">幼圆</option>
  <option value="楷体">楷体</option>
  <option value="微软雅黑">微软雅黑</option>

</select><br/>
Color:<select onchange="document.body.style.color=this[this.selectedIndex].value">
  <option value="">Default</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
  <option value="Blue">Blue</option>
  <option value="Purple">Purple</option>
</select><br/>
BgColor:<select onchange="document.body.style.backgroundColor=this[this.selectedIndex].value">
  <option value="">Default</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
  <option value="Blue">Blue</option>
  <option value="Purple">Purple</option>
</select><br/>

Size:<select onchange="document.body.style.fontSize=this[this.selectedIndex].value">
  <option value="">Default</option>
  <option value="8pt">8pt</option>
  <option value="10pt">10pt</option>
  <option value="12pt">12pt</option>
  <option value="14pt">14pt</option>
  <option value="16pt">16pt</option>
  <option value="18pt">18pt</option>
</select>

</form>
<p>Sample text 塗聚文  締友計算機信息技術有限公司 捷為工作室 涂斯博 涂聚文 赵金红 涂家村 缔友计算机信息技术有限公司 捷为工作室</p>
<div> 不作为的官，都在步步高升，问责成虚设，成卖弄言语的修辞手法,法律只成了制約無勢無錢的窮人！</div>
<p>江西省吉安市永丰县市政花园（市政服务大楼[厅]）工程质量及违法违规建筑容积率问题，从县长，市长，省长信箱，省长手机，省委办公厅，工程质量安全监督局，省信访局，住建部稽查办室，住建部仇部长等形同虚设？</p>

</body>

</html>


文章标签：
Web App开发
关键词：
设置浏览器
浏览器设置
浏览器字体
浏览器兼容
浏览器主流
geovindu
目录
相关文章
john散漫
|
2月前
|
Web App开发 缓存 UED
如何设置浏览器的缓存策略？
【10月更文挑战第23天】通过合理地设置浏览器的缓存策略，可以在提高网页性能、减少网络流量的同时，确保用户能够获取到最新的内容，从而提升用户体验和网站的性能优化效果。
john散漫
131 4
bibilili
|
2月前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
bibilili
126 1
路边两盏灯
|
5月前
|
存储
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
路边两盏灯
47 1
土木林森
|
5月前
|
Web App开发 JSON 安全
【跨域难题终结者】：一键解锁Chrome浏览器神秘设置，彻底告别开发阶段的跨域烦恼！
【8月更文挑战第20天】跨域是前端开发常遇难题，尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法，并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法，提供启动Chrome及使用`fetch`API示例，适合快速测试。但请注意这不适用于生产环境，存在一定安全风险。
土木林森
1246 1
热爱技术的小郑
|
5月前
|
搜索推荐 前端开发 程序员
如何在浏览器中搜索内容自动过滤CSDN的相关文章，一次设置永久过滤
这篇文章介绍了如何在浏览器中设置搜索时自动过滤掉CSDN的相关文章，提供了具体的浏览器设置步骤和推荐使用的搜索引擎。
热爱技术的小郑
90 0
如何在浏览器中搜索内容自动过滤CSDN的相关文章，一次设置永久过滤
。思索
|
5月前
|
IDE 开发工具
Edge浏览器——如何设置跨域请求
Edge浏览器——如何设置跨域请求
。思索
333 0
运营研究坊
|
6月前
|
安全
Linken Sphere指纹浏览器中的IPXProxy代理IP设置技巧
大家想要浏览全球资源的时候，往往会遇到很多的阻碍，学会使用指纹浏览器能解决大家不少的烦恼。Linken Sphere指纹浏览器允许配置代理IP，并使用不同的用户代理，不过有些用户不知道该如何进行代理IP的配置。下文就教会大家如何在Linken Sphere指纹浏览器中设置IPXProxy代理IP。
运营研究坊
71 0
技能实验室
|
2月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式：`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求，返回Promise对象，可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果，适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
技能实验室
62 5
在浏览器执行js脚本的两种方式
大树营养快线
|
2月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致？
综上所述，模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处，也有不同之处。在实际应用中，需要根据具体的场景和性能需求来选择使用哪种字符串处理方式，以达到最佳的性能和开发效率。
大树营养快线
49 6
mao29955
|
2月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的？
总的来说，Moment.js 通过一系列的技术手段和策略，有效地处理了不同浏览器的时间戳格式差异，为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
mao29955
52 1