Css can work out on mac

Anki Card Design
1

image
image1786×1588 138 KB

image
image1797×1578 87.1 KB

image
image1787×1554 66.5 KB

Hi, guys

Could you help me with this card desigh. it does work on the iphone, ipad, and Win platform, but it doesn’t work on Mac. tts en_US’s sounds is awkard too.

.win .card {

font-family: “微軟正黑體”,Arial ;

line-height: 2;

font-size: 26px;

text-align:left

font-weight:bold;

border: 10px double#3A9DDB;

padding:2px;

background:white;

color:black;

display: flex;

justify-content: center;

align-items: center;

height:80vh;

}

.iphone .card {

font-family: “微軟正黑體”,Arial ;

line-height: 1;

font-size: 26px;

text-align:left

font-weight:bold;

padding:2px;

background:white;

color:black;;

display: flex;

justify-content: center;

align-items: center;

height:65vh;

}

.ipad .card {

font-family: “微軟正黑體”,Arial ;

line-height: 1;

font-size: 26px;

text-align:left

font-weight:bold;

padding:2px;

background:white;

color:black;

display: flex;

justify-content: center;

align-items: center;

height:75vh;

}

}

.mac.card {

font-family:Arial ;

line-height: 2;

font-size:26px;

text-align:center

font-weight:bold;

padding:2px;

background:white;

color:black;

display: flex;

justify-content: center;

align-i:80vh;

}

thanks

2

What do you mean by that? The screenshots don’t provide enough context to understand what is expected to look different.

TTS is provided by your operating system. I don’t know how many options MacOS has in terms of adjusting it, but if you need alternatives, you can always use specialized add-ons, such as this one:
https://ankiweb.net/shared/info/111623432

3

image
image2094×1442 236 KB

image
image2078×1538 171 KB

i am sorry! I have upload the fornt and back card for mac, it jsut don’t work on as it does on other platforms

below are css code

Thanks you!

.win .card {

font-family: “微軟正黑體”,Arial ;

line-height: 2;

font-size: 26px;

text-align:left

font-weight:bold;

border: 10px double#3A9DDB;

padding:2px;

background:white;

color:black;

display: flex;

justify-content: center;

align-items: center;

height:80vh;

}

.iphone .card {

font-family: “微軟正黑體”,Arial ;

line-height: 1;

font-size: 26px;

text-align:left

font-weight:bold;

padding:2px;

background:white;

color:black;;

display: flex;

justify-content: center;

align-items: center;

height:65vh;

}

.ipad .card {

font-family: “微軟正黑體”,Arial ;

line-height: 1;

font-size: 26px;

text-align:left

font-weight:bold;

padding:2px;

background:white;

color:black;

display: flex;

justify-content: center;

align-items: center;

height:75vh;

}

}

.mac.card {

font-family:Arial ;

line-height: 2;

font-size:26px;

text-align:center

font-weight:bold;

padding:2px;

background:white;

color:black;

display: flex;

justify-content: center;

align-i:80vh;

}

4

Maybe it’s because your selector for mac is missing a space?

Also, this looks like a typo as well