Testimonial
Testimonials nutzt die Google Schrift Spectral im kursiven Schriftschnitt. Weitere Informationen zur Schrift Spectral Italic 200 sind auf Google Font Spectral auffindbar.
«Das ist ein Testimonial – ein hervorgehobenes Zitat zur Bewerbung eines Angebots.»
1
2 // Testimonial
3 <div class="blockquote row mt-5">
4 <div class="col-6 col-md-4 mb-4 mb-md-0">
5 <img
6 src=""
7 class="img-fluid float-start w-100"
8 alt=""
9 />
10 </div>
11 <div class="col-12 col-md-8">
12 <p class="quote">
13 «Das ist ein Testimonial – ein hervorgehobenes Zitat zur Bewerbung
14 eines Angebots.»
15 </p>
16 <p class="author">Barbara Muster</p>
17 </div>
18 </div>
19Spectral Schriftschnitte
Anschauungsbeispiel mit Internationalisierung der Schrift Spectral mit direkter Bezugsquelle von Gstatic. Die Schriftschnitte sind im FHNW-CSS integriert.
1
2 /* cyrillic */
3 @font-face {
4 font-family: 'Spectral';
5 font-style: italic;
6 font-weight: 200;
7 font-display: swap;
8 src: url(https://fonts.gstatic.com/s/spectral/v13/rnCu-xNNww_2s0amA9M8qrXHWfCFXVAKArdqqQ.woff2) format('woff2');
9 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
10 }
11 /* vietnamese */
12 @font-face {
13 font-family: 'Spectral';
14 font-style: italic;
15 font-weight: 200;
16 font-display: swap;
17 src: url(https://fonts.gstatic.com/s/spectral/v13/rnCu-xNNww_2s0amA9M8qrXHWfuFXVAKArdqqQ.woff2) format('woff2');
18 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
19 }
20 /* latin-ext */
21 @font-face {
22 font-family: 'Spectral';
23 font-style: italic;
24 font-weight: 200;
25 font-display: swap;
26 src: url(https://fonts.gstatic.com/s/spectral/v13/rnCu-xNNww_2s0amA9M8qrXHWfqFXVAKArdqqQ.woff2) format('woff2');
27 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
28 }
29 /* latin */
30 @font-face {
31 font-family: 'Spectral';
32 font-style: italic;
33 font-weight: 200;
34 font-display: swap;
35 src: url(https://fonts.gstatic.com/s/spectral/v13/rnCu-xNNww_2s0amA9M8qrXHWfSFXVAKArc.woff2) format('woff2');
36 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
37 }
38 /* cyrillic */
39 @font-face {
40 font-family: 'Spectral';
41 font-style: italic;
42 font-weight: 300;
43 font-display: swap;
44 src: url(https://fonts.gstatic.com/s/spectral/v13/rnCu-xNNww_2s0amA9M8qtHEWfCFXVAKArdqqQ.woff2) format('woff2');
45 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
46 }
47 /* vietnamese */
48 @font-face {
49 font-family: 'Spectral';
50 font-style: italic;
51 font-weight: 300;
52 font-display: swap;
53 src: url(https://fonts.gstatic.com/s/spectral/v13/rnCu-xNNww_2s0amA9M8qtHEWfuFXVAKArdqqQ.woff2) format('woff2');
54 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
55 }
56 /* latin-ext */
57 @font-face {
58 font-family: 'Spectral';
59 font-style: italic;
60 font-weight: 300;
61 font-display: swap;
62 src: url(https://fonts.gstatic.com/s/spectral/v13/rnCu-xNNww_2s0amA9M8qtHEWfqFXVAKArdqqQ.woff2) format('woff2');
63 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
64 }
65 /* latin */
66 @font-face {
67 font-family: 'Spectral';
68 font-style: italic;
69 font-weight: 300;
70 font-display: swap;
71 src: url(https://fonts.gstatic.com/s/spectral/v13/rnCu-xNNww_2s0amA9M8qtHEWfSFXVAKArc.woff2) format('woff2');
72 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
73 }
74