我目前正在开发一个小项目,我想通过@fontface使用webfonts.

我实现了这样的字体:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

现在您可能已经遇到过Chrome浏览器在以平滑方式显示这些字体时遇到问题.

经过一番搜索,我发现了一个似乎有效的解决方案:你只需移动这部分css:

    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

所以你最终得到这个:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

现在Chrome以平滑的方式呈现字体,这很棒.

但:

由于某种原因,这个有时会打破布局.大约每三次我加载页面我会得到这样的东西:

一切都向左移动.较长的文本正在打破他们的容器.看起来很奇怪.

**之前有没有人遇到过这个问题？

我很乐意就此提出建议.**

随意看看自己: 在线查看Fireflycovers.com

非常感谢!

设置：我使用 Nuxt3 + Pinia + VueUse。

目标： 我想通过 VueUse: 将 pinia 商店的状态保存到本地存储useStorage。

问题： 由于某种原因，本地存储中没有创建任何项目。我觉得我在这里错过了一些东西。在组件中我可以useStorage很好地使用。

在商店/piniaStoreVueUse.js

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

export const usePiniaStoreVueUse = defineStore('piniaStoreUseVue', {
    state: () => {
        return { 
            state: useStorage('my-state', 'empty'),
        }
    },
    actions: {
        enrollState() {
            this.state = 'enroll';
        },
        emptyState() {
            this.state = 'empty'; 
        },
    },
    getters: {
    }
});

在组件/SampleComponentStatePiniaVueUse.vue

<script lang="ts" setup>
    import { usePiniaStoreVueUse } from '~/stores/piniaStoreVueUse'; …

目标

我正在开发一个基于flexbox + calc()的网格系统,在SASS中有排水沟.

您可以通过mixins定义网格,如下所示:

.box {    
    @include column('1/3', $gutter: 20px);
}

编译这将是:

.box {
    width: calc(99.999999% * 1/3 - 13.33333px);
}

问题(请进一步阅读更新)

我正试图找到摆脱经典.row容器的方法.

在我看来,这应该是非常简单的flexbox + calc()但我有这个奇怪的错误(或我的计算错误？),有时在创建多行时打破布局.

举个例子:
我想要一个在列之间有20px排水沟的网格.

其余的最好在代码中解释,所以这是一支笔:

http://codepen.io/NilsDannemann/pen/OMBVry?editors=1100

为什么最后一个例子(1/8 - 多行)破裂了？

更新#1

好吧,继续发生什么事:问题不是植根于flexbox space-between属性,而是来自Flexbox的一般行为.

Flexbox始终将排水沟视为可用空间.因此,在最后一个示例中,它将它们组合在一起(7*20px = 140px),并得出结论:在第一行上有足够的空间来容纳另一个项目(calc()= 107.5px之后的宽度).

这是整个事情的下降.
space-between然后按预期工作.

更新#2

我认为唯一可以解决的问题是(正如@Siguza指出的那样)增加利润以填补排水沟.然后使用:nth-​​child选择器将行的最后一个边距设置为0.

在SASS中,这看起来像这样:

.box {
    @include column('1/8', $gutter: 20px);
    margin-right: 20px;

    &:nth-child(8n) {
        margin-right: 0;
    }
}

现在它成为SASS挑战:
我如何:nth-child从传递的分数中得到(整数)？

经过一番努力,我解决了这个问题.:-)
这是当前SASS版网格的笔:http://codepen.io/NilsDannemann/pen/OMaOvX？edit …

目标：

1. 我正在尝试创建视差滚动效果。

2. 该视差容器实现像这样： < div class="parallax slide-1" > < /div >

3. 当它的容器滚动到 view时，我需要视差效果开始。

4. 一旦离开视图，效果需要停止。

问题：

到目前为止，jQuery 工作正常。

但是：由于我可以在一页上有多个视差容器（例如一个在顶部 + 一个在底部），我需要它们由 jQuery独立处理。

目前效果是...

• 1.) 一旦第一个被滚动到视图中，就会为每个视差容器触发
• 2.) 一旦每个视差容器离开视图，它就会停止。

所以还不是完全的解决方案。

想法

我认为它应该与 jQuerys .each() 一起工作，但到目前为止我无法真正让它工作。

我想当我尝试实现它时，我对某处的嵌套函数感到困惑。

代码

这是我当前的代码：

$(document).ready(function(){

$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds …

我正在努力解决jquery或javascript问题.

它已经烦人了,它告诉我,我可能认为这个太复杂了.

所以我的标记(简称)看起来像这样:

<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>

基本上只是一些容器.

每个包含不同的内容和按钮.

计划:

1)单击按钮后,窗口应向下滚动到下一个容器.

2)最后一个按钮再次滚动到第一个容器.所以我需要一个循环.

3)容器的数量可能会因页面而异.

编辑: 4)容器可能并不总是彼此直接兄弟姐妹(见下面的标记)

问题:

我可以通过为每个容器提供一个唯一的ID作为滚动效果的目标来实现这一点.

问题在于它很快就会变得太乱.

不能我只是以某种方式将" 下一个对象与类:容器 "作为目标,然后滚动到那个？

我不确定js或jquery是否是正确的方法.我对两者的了解有限.

我真的很感激能朝着正确的方向前进.

编辑:容器可能并不总是彼此的直接兄弟姐妹.

<div class="row">
        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>


        <div class="container">
            My Content …

对于我的wordpress-blog上的每个博客文章,我想要Teaxtarea,我可以传递该帖子的其他内容.

在我的情况下,这将是一个无序列表,其中包含内容的快速概述.

该附加内容应显示在博客预览页面上的帖子预览中.

我的问题:

我实际上不确定如何最好地添加这些额外的内容,然后将其传递给预览.

我是否将wordpress的自定义字段用于此类内容？

我很感激能朝着正确的方向前进.

谢谢你,尼尔斯