3.文字样式.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <!--
  6. 对视口做适配
  7. -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <title>Document</title>
  10. <style>
  11. /*
  12. 1.font-size 字体大小
  13. 浏览器可支持最小字体为12px
  14. 浏览器根字体 16px
  15. 2.font-weight 字体粗细
  16. 100~300 细 lighter
  17. 400~500 正常 normal
  18. 600~900 粗 bold bolder
  19. 3.font-family 字体
  20. 4.font-style 字体样式
  21. normal 正常
  22. italic 倾斜
  23. oblique 倾斜(一点弧度 不常用)
  24. 文字在已知宽高的盒子内居中:
  25. 水平:text-align(文本位置):center(left/right)
  26. 垂直:line-height(行间距):当前高度;
  27. 圆角框:
  28. border-radius:50%;圆形
  29. border-bottom-right-radius 右下
  30. border-bottom-left-radius 左下
  31. border-top-right-radius 右上
  32. border-top-left-radius 左上
  33. */
  34. div {
  35. width: 400px;
  36. height: 400px;
  37. border: 3px solid #0f0;
  38. text-align: center;
  39. line-height: 400px;
  40. /* border-radius: 50%; */
  41. border-bottom-right-radius: 10px;
  42. }
  43. p {
  44. /* font-size: 32px; */
  45. /* 缩放 0~1 */
  46. /* scale: 0.5; */
  47. font-weight: bolder;
  48. font-family:'Times New Roman', Times, serif;
  49. font-style: oblique;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div>
  55. 今天天气真好
  56. </div>
  57. </body>
  58. </html>