CSS 如何使用服务端的字体？

1
2
3
4
5
6
7
8
9
CSS 如何使用服务端的字体？

A:@font-face

B:font-family

C:font

D:@font-family

  • 答案

    • @font-face

  • 解析

    • 使用@font-face定义一个字体名称,然后使用font-family使用,就有点类似于@keyframs一样的使用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <html>
    <head>
      <title>Web Font Sample</title>
      <style type="text/css" media="screen, print">
        @font-face {
          font-family: "Bitstream Vera Serif Bold";
          src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
        }

        body { font-family: "Bitstream Vera Serif Bold", serif }
      </style>
    </head>
    <body>
      This is Bitstream Vera Serif Bold.
    </body>
    </html>

    文本「Hello, world.」显示的颜色是?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
文本「Hello, world.」显示的颜色是?

<style>
#content .text {text-color:red;}
#content>.title {color:green;}
#content div.title {font-color:blue;}
strong {font-color:yellow;}
* {color:black;}
</style>

<div id="content">
<span class="text"><strong class="title">Hello, world.</strong></span>
</div>

A: red

B: yellow

C: blue

D: black

E: green

  • 答案

    • E

  • 解析

    1
    2
    3
    4
    5
    6
    仔细看这一段 css，其中 text-color:red 和 font-color:blue 以及 font-color:yellow 都是无效的
    也就是说，只剩下了 #content>.title {color:green;} 和 * {color:black;}
    其中 > 选择器是直系后代，在 DOM 中  <strong> 标签和 <div id="content"></div> 中间还隔了一层 <span> 标签，所以 #content>.title {color:green;} 也是无法作用于无效 <strong> 标签

    只剩下了 * {color:black;} 所以答案为 D
    同学们(敲黑板！)，这道题考的是视力啊！

    CSS 中可继承的属性有哪些

1
2
3
4
5
6
7
8
9
10
CSS 中可继承的属性有哪些
A:height

B:font-size

C:border

D:width

E:color

  • 答案

    • height,color

  • 解析

    • css继承,代表子元素可以使用父元素的样式属性
    • 颜色,字体,行高,间距,对其方式和列表的样式,都可以继承
    1
    2
    3
    4
    所有元素可继承：visibility和cursor。
    内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
    终端块状元素可继承：text-indent和text-align。
    列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

    基于以下 HTML 结构，以下关于 main1.css 和 main2.css 的描述有哪些是正确的？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
基于以下 HTML 结构，以下关于 main1.css 和 main2.css 的描述有哪些是正确的？
<head>
    <link href="main1.css" rel="stylesheet"/>
    <link href="main2.css" ref="stylesheet"/>
</head>
A:main1.css 和 main2.css 同时开始加载，先加载完成的优先解析

B:如果 main1.css 和 main2.css 中有相同的选择器规则，那么 main2.css 中的规则将合并 main1.css 的规则


C:main2.css 只有在 main1.css 加载并解析后，才开始加载


D:如果 main1.css 和 main2.css 中有相同的选择器规则，那么 main2.css 中的规则将被忽略

  • 答案

    • A,B

  • 解析

    • link标签是同时加载的,script标签才会加载完一个再加载另外一个
    • 其实也很好记忆,你想想看到的网页,即使一个css样式没有加载,后面的样式也不会受到影响,所以你只能看到网页某一块地方缺了样式
    • 而js加载的话设计到网页交互规则,必须要加载完后加载另外一个js,否者前一个js文件的规则可能会被后一个js文件所使用,不按顺序加载就会出问题

    以下关于跨域的描述哪些是正确的

1
2
3
4
5
6
7
8
9
10
以下关于跨域的描述哪些是正确的:

A:Web 字体、图片等资源文件加载都不受浏览器跨域限制

B:CSS 文件的加载不受跨域限制

C:window.onerror 方法默认情况下无法获取跨域脚本的报错详情

D:canvas 中使用 drawImage 贴图会受跨域限制

  • 答案
    • A,B,C
  • 解析
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    css文件的加载肯定不收跨域限制，a站点能引用B站点的样式d
    canvas的drawImage使用跨域图片，会报错
    解决方案1、
    如果图片不大不多可以使用base64
    解决方案2、
    实例的image对象的设置img.crossOrigin = ' ';并且在服务器端设置Access-Control-Allow-Origin:*(或运行的域名

    如果想通过onerror函数收集不同域的js错误，我们需要做两件事：

    相关的js文件上加上Access-Control-Allow-Origin:*的response header
    引用相关的js文件时加上crossorigin属性
    链接：https://www.jianshu.com/p/315ffe6797b8